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匹配确定功能，一个与否定功能。但他们都表现出来了吗？如果我改变它们只是函数＆＃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

https://docs.angularjs.org/api/ng/directive/ngShow

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="myValue"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="myValue" class="ng-hide"></div>

Answer 2

您的代码很好：

Age

JS：

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

Answer 3

我认为你的意思是当页面加载然后消失时它是可见的？如果是这样的话，那么你也想要使用ng-cloak。

请记住，在Angular加载之前，ng-cloak使用的css是不可用的，所以大多数人都会将CSS这样放在文档的标题中。

$options = CHtml::listData(HrpContactTypes::model()->findAll(),'id','type');
$ct = array();
for($i=0; $i<count($options); $i++) {
    $ct[$i+1] = Yii::t('candidates', $options[$i]);
}

div上的基本ng-show无效

3 个答案: