我有这段代码:
....
<article class="collapse navbar-collapse">
<ul ng-if="isLogged()" class="nav navbar-nav">
<li ng-class="{'active': activeUrl === 'projects'}">
<a href="#/projects" ng-click="activeUrl='projects'">Projects</a>
</li>
<li ng-if="isAdmin()" ng-class="{'active': activeUrl === 'admin'}">
<a href="#/admin" ng-click="activeUrl='admin'">Administration</a>
</li>
</ul>
</article>
单击链接时应添加active
类。在我添加模拟用户身份验证的ng-if
表达式之前,它一直运行良好。现在,当它添加active
类一次时,它在单击另一个导航链接时不会删除此类 - 它看起来像是同时打开了2个页面。
applicationController
有模拟函数:
applicationController= function($scope, Restangular, userService){
$scope.activeUrl = "admin";
$scope.data = {
user: {
email: undefined,
password: undefined
}
};
$scope.login = function(user){
//login mock
};
$scope.isLogged = function(){
return userService.isLogged();
};
$scope.isAdmin = function(){
return userService.isAdmin();
};
};
并且userService
具有确定用户是否经过身份验证以及是否为管理员的逻辑。我不认为ng-if
在一个HTML元素中ng-class
是不寻常的,这就是为什么我认为我必须犯一些我无法看到的简单错误。是否在任何点击后重新创建范围?如果有人帮助我,我会很高兴 - 提前谢谢你!
更新:@ptwo帮助的解决方案,我需要$parent
和管理$parent.$parent
:
<article class="collapse navbar-collapse">
<ul ng-if="isLogged()" class="nav navbar-nav">
<li ng-class="{'active': $parent.activeUrl === 'projects'}">
<a href="#/projects" ng-click="$parent.activeUrl='projects'">Projects</a>
</li>
<li ng-if="isAdmin()" ng-class="{'active': $parent.$parent.activeUrl === 'admin'}">
<a href="#/admin" ng-click="$parent.$parent.activeUrl='admin'">Administration</a>
</li>
</ul>
</article>
使用解决方案 更新2 而不直接访问$parent
,但data
中的applicationController
对象允许我访问activeUrl
:
<article class="collapse navbar-collapse">
<ul ng-if="isLogged()" class="nav navbar-nav">
<li ng-class="{'active': data.activeUrl === 'projects'}">
<a href="#/projects" ng-click="data.activeUrl='projects'">Projects</a>
</li>
<li ng-if="isAdmin()" ng-class="{'active': data.activeUrl === 'admin'}">
<a href="#/admin" ng-click="data.activeUrl='admin'">Administration</a>
</li>
</ul>
</article>
applicationController= function($scope, Restangular, userService){
$scope.data = {
activeUrl: "admin",
user: {
email: undefined,
password: undefined
}
};
....
答案 0 :(得分:2)
使用函数更改activeUrl。在视图中包含表达式绝不是一种好习惯。
<article class="collapse navbar-collapse">
<ul ng-if="isLogged()" class="nav navbar-nav">
<li ng-class="{'active': isActiveUrl('projects')}">
<a href="#/projects" ng-click="updateActiveUrl('projects')">Projects</a>
</li>
<li ng-if="isAdmin()" ng-class="{'active': isActiveUrl('admin')}">
<a href="#/admin" ng-click="updateActiveUrl('admin')">Administration</a>
</li>
</ul>
</article>
applicationController= function($scope, Restangular, userService){
$scope.data = {
activeUrl: "admin",
user: {
email: undefined,
password: undefined
} };
$scope.isActiveUrl = isActiveUrl;
$scope.updateActiveUrl = updateActiveUrl;
function isActiveUrl(param){
return $scope.data.activeUrl == param;
}
function updateActiveUrl(param){
$scope.data.activeUrl = param;
}
}
我们的想法是将父范围的成员变量从其自己的范围更改,而不是ng-if的子范围。
答案 1 :(得分:1)
使用ng时 - 如果它添加了自己的范围,因此在单击时,将在控制器的子范围上设置activeUrl。尝试使用$parent.activeUrl='admin'
它应该可以使用