使用 ngif 时 ng-class 的奇怪行为

Question

我有这段代码：

....
<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>

点击link时应该加上activeclass。在我添加模拟用户身份验证的 ng-if 表达式之前，它运行良好。现在，当它添加 active class 一次时，它不会在单击另一个导航 link 时删除此 class - 看起来同时打开了 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 和 ng-class 在一个 HTML 元素中是不寻常的，这就是为什么我认为我一定犯了一些我看不到的简单错误。单击后是否重新创建范围？如果有人帮助我，我会很高兴 - 提前谢谢你！更新：@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，但在 applicationController 中使用 data 对象允许我访问 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
        }
};
....

Answer 1

当您使用 ng-if 时，它会添加自己的范围，因此在单击时，activeUrl 将设置在控制器的子范围内。尝试使用 $parent.activeUrl='admin' 它应该有效

Answer 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 的子作用域。

使用 ngif 时 ng-class 的奇怪行为

Strage behavior of ng-class when ng-if is used

javascript

twitter-bootstrap

angularjs

angularjs-scope

twitter-bootstrap-3