2

我使用angularJS与引导来设计我的应用程序的导航。我定义了一个主控制器,并在主控制器内部使用ng-view属性调用不同的页面视图,然后这些单独的视图拥有自己的控制器。ngClass不更新类

我正在使用ng-class属性将活动类添加到我的链接,但它不起作用。表达式评估为true或false,但ng-class不会更新元素上的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-class正常工作,但在使用超链接时不能正常工作,请建议。

回答

4

模板上的语法错误。它应该是:

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

正如风格指南尝试使用的===,而不是简单的,因为type coercion==。或者再次测试truthy or falsy