Почему переменная недоступна в контроллере?

Question

У меня есть HTML-код:

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

и контроллер:

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

Так что, если сделать:

{{selectedTab}} 

в шаблон HTML получить всегда: first

Answer 1

Вам необходимо обновить переменную $scope новым $routeParams сразу после смены маршрута. Для этого вы можете прослушивать событие $routeChangeSuccess. Попробуйте это:

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; 
    } 
    }); 

}]); 

Так что для исходного примера вы, вероятно, придется сделать что-то вроде этого:

$scope.selectedTab = 'first'; 

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

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

}); 

Answer 2

Используйте угловой $ http service ($http.get()), а не ajax.get(). В противном случае, Angular не знает об изменениях, которые вы вносите в область действия после ответа HTTP-ответа, и обратный вызов выполняется, если вы не вызываете $scope.$apply().