Angular中带有ng-show的布尔变量，最初没有设置

Question

对于特定的下拉菜单，我想根据我的应用中的布尔值显示不同的选项。我已经设置了一切并且 SORTA 工作正常，但是 DOM 没有正确更新以显示下拉列表中的值。我用来检查代码的console.logs 输出了我的变量的正确值，当我刷新页面时，下拉列表填充得很好。

$scope.login = function () {
    var loginUrl = url;

    $server.post(loginUrl, $scope.user)
        .then(function(response) {
            var data = response.data;

            if(data.status == 'OK') {
                //some things here that work fine
                $scope.getRights();
            } else {
                $scope.user.password = '';
            }
        }
};

$scope.getRights = function() {
    console.log("yo");
    $scope.boolA = false;
    $scope.boolB = false;
    $scope.boolC = false;
    $scope.boolD = false;

    $scope.permissions.forEach(function (right) {
        console.log(right);
        switch(right) {
            case "A":
                $scope.boolA = true;
                break;
            case "B":
                $scope.boolB = true;
                break;
            case "C":
                $scope.boolC = true;
                break;
            case "D":
                $scope.boolD = true;
                break;
        }
    });
    console.log($scope.boolA + " " + $scope.boolB + " " + $scope.boolC + " " + $scope.boolD);
};

使用匹配的 html，正确的控制器在上面的 <div> 中定义。

<ul class="dropdown-menu" uib-dropdown-menu role="menu">
    <li role="menuitem" ng-show="boolA"><a href="#/start">
        Option A
    </a></li>
    <li role="menuitem" ng-show="boolB"><a href>
        Option B
    </a></li>
    <li role="menuitem" ng-show="boolC"><a href>
        Option C
    </a></li>
    <li role="menuitem" ng-show="boolD"><a href>
        Option D
    </a></li>
</ul>

$scope.permissions 中的json是["A","B","D"]

我的 console.log 输出：true true false true

如果我在浏览器中检查 $scope 变量，它们没有设置，并且下拉选项都启用了 ng-hide。当我刷新页面时，它们会显示在 $scope 检查器中，并且我的下拉列表具有正确的值。所以看起来要么存在同步/异步问题，要么我使用了不正确的路由来设置这些变量。

简单地将它们设为全局并不会改变任何东西。一个“简单”的修复方法是在成功登录后强制重新加载，但这并不像“角度方式”。我很确定我只是在这里犯了一个初学者的错误。谁能帮我找出这个错误在哪里？

Answer 1

您是否可以不简单地将“权限”数组转换为菜单项列表，而不是这样做？这样用户将无法看到 html 中的选项。

$scope.getRights = function() {
$scope.permissions = ["A", "B", "D"];
$scope.menuItems = [];
$scope.permissions.forEach(function(val) {
  $scope.menuItems.push({
    title: val
  });
});

}

<ul role="menu">
<li role="menuitem" ng-repeat="item in menuItems">
  <a>Option {{item.title}}</a>
</li>

查看this plunkr

更新

在这种情况下，您的 DOM 很可能没有更新，因为与 this post 相关的问题建议使用 $apply()：

$scope.$apply(function(){
        $scope.boolA = false;
    });

另外，请务必查看Danny Bullis 评论：

使用 $q.defer();返回的对象允许您在异步方法完成后调用 .resolve() 或 .reject() 方法。 $q.defer() 对象的 resolve 和 reject 方法都在解析异步方法后在内部调用 $digest。 $digest 告诉 Angular 重新评估您的 $scope 属性，这将满足您的需求。这是一个更好的做法。如果您不需要调用 $apply() 并且有更好的内置角度机制来处理这个问题，请避免调用。