ngClass 未更新 class
ngClass not updating the class
我正在使用 angularJS 和 bootstrap 来设计我的应用程序的导航。我定义了一个主控制器,在主控制器内部我使用 ng-view 属性调用不同的页面视图,然后这些单独的视图有自己的控制器。
我正在使用 ng-class 属性将活动的 class 添加到我的 links,但是它不起作用。表达式的计算结果为真或假,但 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;
}]);
当我从主页点击登录页面时,活动 class 不会从主页 link 中删除,也不会应用于登录页面,但是,当我查看代码时firebug 页面更改时,表达式的计算结果为 true 或 false。
当我在个别页面上刷新时,ng-class 可以正常工作,但在使用 hyperlinks 时不能正常工作,请提出建议。
模板语法错误。应该是:
<li role="presentation" ng-class="{'active': path==='/'}"><a ng-href="#/">Home</a></li>
作为风格指南,尝试使用 ===
而不是简单的 ==
因为 type coercion。或者再次测试 truthy 或 falsy
我正在使用 angularJS 和 bootstrap 来设计我的应用程序的导航。我定义了一个主控制器,在主控制器内部我使用 ng-view 属性调用不同的页面视图,然后这些单独的视图有自己的控制器。
我正在使用 ng-class 属性将活动的 class 添加到我的 links,但是它不起作用。表达式的计算结果为真或假,但 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;
}]);
当我从主页点击登录页面时,活动 class 不会从主页 link 中删除,也不会应用于登录页面,但是,当我查看代码时firebug 页面更改时,表达式的计算结果为 true 或 false。
当我在个别页面上刷新时,ng-class 可以正常工作,但在使用 hyperlinks 时不能正常工作,请提出建议。
模板语法错误。应该是:
<li role="presentation" ng-class="{'active': path==='/'}"><a ng-href="#/">Home</a></li>
作为风格指南,尝试使用 ===
而不是简单的 ==
因为 type coercion。或者再次测试 truthy 或 falsy