Question

感谢this question的答案，我能够制作一个从AJAX调用中获取数据的DIV，如果它从后端收到错误401，它将优雅地显示一条好消息。

但是，我注意到当它出现401错误时，即使它隐藏了显示它将收到的数据的div，我仍然在Firebug中看到它试图显示这些数据。

我如何告诉AngularJS不仅隐藏这个区域而且根本不执行任何内容？

<div class="pageContent">
    <h2>Showcase AngularJS 4</h2>

    <div ng-app="mainApp">
        <div ng-controller="projectManagerController">
            <div class="projectManagerArea">
                <div class="hasAccess" ng-show="projectManagers != '[noAccess]'">
                    <h3>Project Managers</h3>
                    <ul ng-repeat="projectManager in projectManagers | orderBy: 'surname'">
                        <li>{{projectManager.surname}}</li>
                    </ul>
                </div>
                <div class="hasNoAccess" ng-show="projectManagers == '[noAccess]'">
                    (no access to project managers)
                </div>
            </div>
        </div>
    </div>

    <script>
        var app = angular.module('mainApp', []);
        app.controller('projectManagerController', function ($scope, $http) {
            $scope.message = 'Here are the project managers:';

            $http.get("<?= qsys::getFullUrl("task/showcaseAngularjs3") ?>")
                    .success(function (response) {
                        $scope.projectManagers = response;
                    })
                    .error(function (error) {
                        $scope.projectManagers = '[noAccess]';
                    });
        });
    </script>

    <style type="text/css" scoped>
        .projectManagerArea {
            border: 1px solid #ddd;
            background-color: #eee;
            width: 500px;
            padding: 10px;
            border-radius: 5px;
        }
        .projectManagerArea h3 {
            font-size: 14px;
            margin: 0;
            border-bottom: 1px solid #ccc;
        }
    </style>
</div>

Answer 1

使用ng-if代替ng-show。 Ng-show仅使用CSS来隐藏DOM元素，但仍然尝试创建它，而ng-if会在每次“projectManagers！=＆＃39; [noAccess]＆＃39;＆＃”时重新创建div 39;，并在条件不满足时将其删除。

<div class="hasAccess" ng-if="projectManagers != '[noAccess]'">

如何让AngularJS有条件地不在div中执行任何代码？

1 个答案: