CODEWITHSUNDEEP
javascriptangularjs
John Abraham
John Abraham

Reputation: 18831

How to trigger a function from ng-view's controller on load -- angular

The goal of this question is to have an active class, that is set on the current view's navigation anchor. The trigger for this active class is a function that executes on the view's load and not the user's click.

I believe, by removing the ng-click function from the navigation anchors and replacing them within the .config -> .when -> .controller of each route of my applications I can create a better interaction with my navigation bar.

I have 3 views:

var angApp = angular.module('ang6App', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl' //placing the function call here wont work when i use a string also.?
      })
      .when('/flights', {
        templateUrl: 'views/flights.html',
        controller: 'FlightsCtrl'
      })
      .when('/reservations', {
        templateUrl: 'views/reservations.html',
        controller: 'ReservationsCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

setActive Function inside MainCtrl

angular.module("ang6App")
  .controller("MainCtrl", function ($scope) {

    $scope.setActive = function (type) {
      $scope.destinationActive = ""; //sets to null
      $scope.flightsActive = "";
      $scope.reservationsActive = "";

      $scope[type + "Active"] = "active"; //targets and matches varible and sets ng-class to active
    };

  });

2 additional empty controllers

angular.module('ang6App')
  .controller('ReservationsCtrl', function ($scope) {

  });

angular.module('ang6App')
  .controller('FlightsCtrl', function ($scope) {


  });

HTML -- how can I remove the ng-click from the anchors

<body ng-app="ang6App">
    <div class="page-container" ng-controller="MainCtrl">
      <div  class="container">
        <ul class="nav nav-pills">
          <li ng-class="destinationsActive">
            <a ng-click="setActive('destinations')"  href="#">Destinations</a>
          </li>

          <li ng-class="flightsActive">
            <a ng-click="setActive('flights')"  href="#/flights">Flights</a>
          </li>

          <li ng-class="reservationsActive">
            <a ng-click="setActive('reservations')"  href="#/reservations">Reservations</a>
          </li>

        </ul> 
      </div>
      <div class="container" ng-view=""></div>
    </div><!--end of MainCtrl page-container-->
</body>

Upvotes: 2

Views: 2572

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

I would suggest to use the full power of ngClass

<li ng-class="{active:selected=='destination'}">
  <a ng-click="selected = 'destination'"  href="#" >Destinations</a>
</li>

<li ng-class="{active:selected=='flight'}">
  <a ng-click="selected = 'flight'"  href="#/flights">Flights</a>
</li>

<li ng-class="{active:selected=='reservation'}">
  <a ng-click="selected ='reservation'"  href="#/reservations">Reservations</a>
</li>

Now we do not need action setActive. The ngClick works with the model ($scope.selected), selecting the intended value. The ngClass reads the selection and applies the .active class for us

So: We can set the $scope.selected with a default, no need to trigger anything on load, just set the correct selection in controller...

Upvotes: 3

Related Questions