javascript - div 上的基本 ng-show 不起作用

Question

我只是想让 ng-show 标签工作并测试它，我有一个硬编码的示例，甚至这也不起作用(页面加载时可见)。代码如下。

@{
    ViewBag.Title = "Secure Environment Flex";
}
<div class="row">
    <div class="col-md-12">
        <h3>Secure Environment</h3>
    </div>
</div>
<div ng-controller="SEFlexHomeController" ng-show="false">
    <div >
        <div >
            <ul>
                <li><a href="#tabs-Jobs">Jobs</a></li>
                <li><a href="#tabs-Models">Models</a></li>
                <li><a href="#tabs-Administration">Administration</a></li>
            </ul>
            <div id="tabs-Jobs" >
                <h1>Welcome to this jobs tab</h1>
            </div>
            <div id="tabs-Models">
                <h1>Welcome to this models tab</h1>
            </div>
            <div id="tabs-Administration" >
                <h1>Welcome to this administration tab</h1>
            </div>
        </div>
    </div>
</div>

这让我抓狂，为什么它仍然可见？ CSS 中的其他内容是否会覆盖它？如果是，我该如何判断？

编辑:好的，我让它在范围内使用基本变量，如建议的那样。现在我正试图将其与实际行动联系起来。我的代码在后台检索权限列表，一旦检索到这些权限，我想根据用户是否获得许可来显示页面或错误。现在奇怪的是我有两个部分，页面和错误，一个部分带有 ng-show 匹配确定函数，另一部分带有否定函数。但他们俩都在表现？如果我将它们都更改为函数“isPermissioned”，那么顶部的一个会显示而底部则不会，所以看起来它们从同一函数中获得了不同的值。这可能是因为一个在另一个之前执行，并且当后台方法更新权限时，它没有触发数据绑定(bind)？

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

对于您给定的代码:

<div ng-controller="SEFlexHomeController" ng-show="show">
    <div >
        <div >
            <ul>
                <li><a href="#tabs-Jobs">Jobs</a></li>
                <li><a href="#tabs-Models">Models</a></li>
                <li><a href="#tabs-Administration">Administration</a></li>
            </ul>
            <div id="tabs-Jobs" >
                <h1>Welcome to this jobs tab</h1>
            </div>
            <div id="tabs-Models">
                <h1>Welcome to this models tab</h1>
            </div>
            <div id="tabs-Administration" >
                <h1>Welcome to this administration tab</h1>
            </div>
        </div>
    </div>
</div>

JS:

myAngularApp.controller('SEFlexHomeController', ['scope', function($scope) {
   $scope.show = false;
   // do stuff here
}]);