Question

我的代码在后台检索权限列表，一旦检索到这些权限，我想显示页面或错误，具体取决于用户是否被许可。

奇怪的是，我有两个部分，页面和错误，一个用ng-show匹配确定用户是否被许可的功能，另一个用否定功能。但两个页面部分都在显示。

如果我改变它们只是功能本身 - ＆＃34; isPermissioned＆＃34;然后顶部显示，底部显示，所以看起来他们从同一个函数获得不同的值。这可能是因为一个在另一个之前执行，并且当后台方法更新权限时，它不会触发数据绑定吗？我想我绑定了一个函数，而不是一个变量。当某些内容发生变化时，如何重新评估这些功能呢？

HTML

<div ng-controller="SEFlexHomeController" ng-show="isPermissioned">
    <div class="row" id="TabsSet1">
        <div class="col-md-12">
            <ul>
                <li ng-show="AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs"><a href="#tabs-Jobs">Jobs</a></li>
                <li ng-show="AuthService.canViewFlexModels"><a href="#tabs-Models">Models</a></li>
                <li ng-show="AuthService.canAdministerFlex"><a href="#tabs-Administration">Administration</a></li>
            </ul>
            <div id="tabs-Jobs" ng-show="AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs">
                <h1>Welcome to this jobs tab</h1>
            </div>
            <div id="tabs-Models" ng-show="AuthService.canViewFlexModels">
                <h1>Welcome to this models tab</h1>
            </div>
            <div id="tabs-Administration" ng-show="AuthService.canAdministerFlex">
                <h1>Welcome to this administration tab</h1>
            </div>
        </div>
    </div>
</div>
<div ng-show="!isPermissioned">
    <h3>You have no permissions to view Secure Environment pages</h3>
</div>

的JavaScript

app.controller("SEFlexHomeController", ["$scope", "$http", "$modal", "$log", "$element", "$rootScope", "AlertsService", "AuthService", "SEApplicationService", function ($scope, $http, $modal, $log, $element, $rootScope, AlertsService, AuthService, SEApplicationService) {
        $rootScope.closeAlert = AlertsService.closeAlert;
        $scope.isDataLoading = false;
        $scope.AuthService = AuthService;
        $scope.show = false;

        $scope.isPermissioned = function() {
            return AuthService.canAdministerFlex || AuthService.canViewFlexModels || AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs;
        }
    }
]);

验证服务

function AuthService($log, $http) {

    var authService = {
        canRunFlexJobs: false,
        canRunHighPriorityFlexJobs: false,
        canViewFlexModels: false,
        canApproveFlexModels: false,
        canAdministerFlex: false
    };

    authService.getUserClaims = function () {
        $http.post("/Admin/Auth/GetUserClaims")
            .success(function (response, status, headers, config) {
                if (response) {
                    angular.forEach(response.data, function (item) {
                        if (item.Value === "SEFlexJobRunner")
                            authService.canRunFlexJobs = true;
                        if (item.Value === "SEFlexHighPriorityJobRunner")
                            authService.canRunHighPriorityFlexJobs = true;
                        if (item.Value === "SEFlexModelViewer")
                            authService.canViewFlexModels = true;
                        if (item.Value === "SEFlexModelApprover")
                            authService.canApproveFlexModels = true;
                        if (item.Value === "SEFlexAdministrator")
                            authService.canAdministerFlex = true;
                    });
                }
            })
            .error(function (reason, status, headers, config) {
                console.log(reason);
            });

    }
    authService.getUserClaims();
    return authService;
};

Answer 1

尝试在立即执行函数中合并所有模块注册，以避免创建全局变量引用。

示例如下

(function(){
//Your angular code goes here(i.e service or module)
}());

Answer 2

由于它是一个函数，你必须调用它，此时，你将函数传递给ng-show指令，而不是函数的结果。

<div ng-controller="SEFlexHomeController" ng-show="isPermissioned()">
    <div class="row" id="TabsSet1">
        <div class="col-md-12">
            <ul>
                <li ng-show="AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs"><a href="#tabs-Jobs">Jobs</a></li>
                <li ng-show="AuthService.canViewFlexModels"><a href="#tabs-Models">Models</a></li>
                <li ng-show="AuthService.canAdministerFlex"><a href="#tabs-Administration">Administration</a></li>
            </ul>
            <div id="tabs-Jobs" ng-show="AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs">
                <h1>Welcome to this jobs tab</h1>
            </div>
            <div id="tabs-Models" ng-show="AuthService.canViewFlexModels">
                <h1>Welcome to this models tab</h1>
            </div>
            <div id="tabs-Administration" ng-show="AuthService.canAdministerFlex">
                <h1>Welcome to this administration tab</h1>
            </div>
        </div>
    </div>
</div>
<div ng-show="!isPermissioned()">
    <h3>You have no permissions to view Secure Environment pages</h3>
</div>

而且，您可以使用ng-show="!isPermissioned()"代替ng-hide，而不是ng-hide="isPermissioned()"

修改：

此外，您的控制器属性似乎应该封装<div> s：

<div ng-controller="SEFlexHomeController"> <div ng-show="isPermissioned"> ... </div> <div ng-hide="isPermissioned"> <h3>You have no permissions to view Secure Environment pages</h3> </div> </div>

Answer 3

你需要调用isPermissioned方法，因此ng-show =＆＃34;！isPermissioned将是ng-show =＆＃34;！isPermissioned（）和ng-show =＆＃34; isPermissioned＆＃34;将是ng-show =＆＃34; isPermissioned＆＃34;（）

DOM中不同位置的角度函数的结果不同

3 个答案: