CODEWITHSUNDEEP
angularjs
Babaev
Babaev

Reputation: 101

Why variable is not available in controller?

I have HTML code:

<div ng-controller="ProfileLeftMenu">
<li ng-class="{'active':selectedTab == 'personal'}" ng-click="selectedTab = 'personal'" class=""><a href="1">Personal</a>
</li>
</div>

And controller:

 $scope.selectedTab = 'first';
 if ($routeParams.page) {
   ajax.get(page, function (CbData) {
       $scope.selectedTab = page;
   });
 }

So, if do:

{{selectedTab}}

in template HTML get always: first

Upvotes: 0

Views: 109

Answers (2)

Matt Herbstritt
Matt Herbstritt

Reputation: 4862

You need to update your $scope variable with the new $routeParams just after the change in route. For that you can listen for the$routeChangeSuccess event. Try this:

DEMO

app.js

var app = angular.module('plunker', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider){

    $routeProvider
      .when('/test/:page', {

        templateUrl: function(params) {
          return 'pidat.html';
        },

        controller: 'MainCtrl'
      });

  }

]);

app.controller('MainCtrl', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {

  // when controller is loaded params are empty
  console.log('on controller load $routeParams', $routeParams);

  $scope.name = 'World';

  // only after you have transitioned to the new 
  // route will your $routeParams change so we
  // need to listen for $routeChangeSuccess
  $scope.$on('$routeChangeSuccess', function(){

      console.log('on $routeChangeSuccess load $routeParams', $routeParams);

    if ($routeParams.page) {
       $scope.name = $routeParams.page;
    }
  });

}]);

So for your original example you would probably have to do something like this:

$scope.selectedTab = 'first';

$scope.$on('$routeChangeSuccess', function(){

   if ($routeParams.page) {
       ajax.get(page, function (CbData) {
           $scope.selectedTab = page;
       });
   }

});

Upvotes: 1

JB Nizet
JB Nizet

Reputation: 691765

Use the angular $http service ($http.get()), not ajax.get(). Otherwise, Angular isn't aware of the change you make to the scope once the HTTP response comes and the callback is executed, unless you call $scope.$apply().

Upvotes: 0

Related Questions