Question

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

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

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

Angularjs ng-show方法

2 个答案: