ngClass没有更新类

ngClass not updating the class

本文关键字:更新 ngClass      更新时间:2023-09-26

我使用angularJS与bootstrap来设计我的应用程序上的导航。我已经定义了一个主控制器,在主控制器中,我使用ng-view属性调用不同的页面视图,然后这些单独的视图有自己的控制器。

我正在使用ng-class属性将活动类添加到链接中,但是,它不起作用。表达式的计算结果为真或假,但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工作正常,但不使用超链接时,请建议。

模板语法错误。应该是:

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

作为风格指南,尝试使用===而不是简单的==,因为类型强制。或检验真假