Angularjs ng-show方法

Question

我有一个angular应用程序，我想根据权限显示一些数据，所以在我的主控制器上，我从服务器获取一些数据，看看哪些角色分配给了当前用户。

问题是，用于决定元素应该显示还是隐藏的方法是运行到服务器的异步调用，以查看角色。

<div class="menu">
    <a ng-show="$root.hasRole(['admin', 'tech'])" ng-cloak>
        <i class="grid layout icon"></i> Users
    </a>
    ....
</div>

和函数hasRole

controller('MainCtrl', [
    '$scope',
    '$rootScope',
    'WhoAmI',
    function($scope, $rootScope, WhoAmI) {
        $rootScope.whoAmI = false;

        $scope.init = function() {
            WhoAmI.whoAmI(function(err, res) {
                $rootScope.whoAmI = res.user;
            });
        };

        $rootScope.hasRole = function(roles) {
            if(!$rootScope.whoAmI){
                return false;
            }
            _.forEach($rootScope.whoAmI.roles, function(v, k) {
                if (v.name in roles) {
                    return true;
                }
            });

            return false;
        }
    }
])

正如您所期望的，元素在init函数的调用返回之前呈现，并保持隐藏状态。我将该方法hasRole附加到$rootScope，因为我希望它在整个应用程序中可用。

有没有办法暂停渲染，直到$rootScope.whoAmI不再为假，或者有没有更好的方法来处理这个问题？

Answer 1

问题出在内部return true语句上。它返回true，但从内部函数返回；hasRole()函数仍然返回false。所以把它写成：

    $rootScope.hasRole = function(roles) {
        var result = false;
        if(!$rootScope.whoAmI){
            return false;
        }
        _.forEach($rootScope.whoAmI.roles, function(v, k) {
            if (v.name in roles) {
                result = true;
                return false; // we have the result, stop iterating
            }
        });

        return result;
    };

Answer 2

这是错误的方式：

ng-show="$root.hasRole(['admin', 'tech'])"

您需要将其更改为：ng-show="hasRole(['admin', 'tech'])"

<div class="menu">
    <a ng-show="hasRole(['admin', 'tech'])" ng-cloak>
        <i class="grid layout icon"></i> Users
    </a>
    ....
</div>