2

Я использую angularJS с бутстрапом для разработки навигации по моему приложению. Я определил главный контроллер и внутри основного контроллера я вызываю разные виды страниц, используя атрибут ng-view, а затем эти отдельные представления имеют свои собственные контроллеры.ngClass не обновляет класс

Я использую атрибут ng-class, чтобы добавить активный класс к моим ссылкам, однако он не работает. Выражение оценивается как true или false, но ng-класс не обновляет class = "active" для элементов.

На моей домашней странице у меня есть следующий код -

<section ng-controller="dashBoardCtrl" class="container"> 
     <section class="row"> 
      <h1>DME DashBoard | <small>WFM HeadCount</small> </h1> 
     </section> 

     <section class="row"> 
      <ul class="nav nav-tabs"> 
       <li role="presentation" ng-class="{active: {{path=='/'}}}"><a ng-href="#/">Home</a></li> 
       <li role="presentation" ng-class="{active: {{path=='/login'}}}"><a ng-href="#/login">Login</a></li> 
      </ul> 
     </section> 

     <section ng-view></section> 
    </section> 

Это как маршруты настроены на приложение -

dmeDash.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
      templateUrl: '/views/home.html', 
      controller: 'homePageCtrl' 
     }) 
     .when('/login', { 
      templateUrl: '/views/login.html', 
      controller: 'loginCtrl' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
}]); 

dashBoardCtrl имеют следующий код -

dmeDashControllers.controller('dashBoardCtrl', ['$scope','$location', function($scope, $location) { 

    $scope.path = $location.$$path; 

    $scope.$watch('path',function(n,o) { 

    }) 

}]); 

Главная страница Контроллер имеет следующий код -

dmeDashControllers.controller('homePageCtrl', ['$scope','$location', function($scope, $location) { 

    $scope.$parent.path = $location.$$path; 
}]); 

Бревно контроллер страницы имеет следующий код -

dmeDashControllers.controller('loginCtrl', ['$scope','$location', function($scope, $location) { 

    $scope.$parent.path = $location.$$path; 

}]); 

Когда я нажимаю с домашней страницы на страницу входа в активный класс не удаляется из домашней страницы ссылки и не распространяется на страницу входа в но, однако, когда я просматриваю код в firebug, выражения меняются на true или false при изменении страницы.

Когда я обновляю отдельные страницы, класс ng работает правильно, но не при использовании гиперссылок, пожалуйста, предложите.

ответ

4

Синтаксис не соответствует шаблону. Оно должно быть:

<li role="presentation" ng-class="{'active': path==='/'}"><a ng-href="#/">Home</a></li> 

И как стиль руководства попробуйте использовать === вместо простого == из type coercion. Или повторите проверку правды или фальсификации

Смежные вопросы