如何获得AngularJS有条件不在一个div执行任何code？ [英] How to get AngularJS to conditionally not execute any code in a div?

问题描述

由于答案<一href=\"http://stackoverflow.com/questions/27530070/what-is-the-best-way-to-gracefully-fail-in-angularjs-when-no-access-to-ajax\">this问题，我能够做一个DIV从一个AJAX调用获取数据，如果它收到来自后端的错误401，它将优雅地显示一个不错的消息。

不过，我注意到，当它得到一个401错误，即使它隐藏显示的数据，这将收到的股利，我还是在Firebug看到，它试图显示此数据。

我怎么能告诉AngularJS不仅隐藏该区域，但不是在它执行了什么呢？

 ＆LT; D​​IV CLASS =pageContent＆GT;
    ＆LT; H2＆GT;展柜AngularJS 4℃; / H＆GT;    ＆LT; D​​IV NG-应用=mainApp＆GT;
        ＆LT; D​​IV NG控制器=projectManagerController＆GT;
            ＆LT; D​​IV CLASS =projectManagerArea＆GT;
                ＆LT; D​​IV CLASS =hasAccessNG-秀=projectManagers ='[noaccess下]'！＆GT;
                    ＆LT; H3＆GT;项目经理＆LT; / H3 GT＆;
                    ＆LT; UL NG重复=projectManager在projectManagers |排序依据：'姓'＆GT;
                        ＆LT;立GT; {{projectManager.surname}}＆LT; /李＆GT;
                    ＆LT; / UL＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; D​​IV CLASS =hasNoAccessNG-秀=projectManagers =='[noaccess下]'＆GT;
                    （没有获得项目经理）
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;    ＆LT;脚本＆GT;
        VAR应用= angular.module（'mainApp'，[]）;
        app.controller（'projectManagerController'，函数（$范围，$ HTTP）{
            $ scope.message ='这里是项目经理：';            $ http.get（＆LT; = QSYS :: getFullUrl（任务/ showcaseAngularjs3）＆GT;？）
                    .success（功能（响应）{
                        $ scope.projectManagers =响应;
                    }）
                    .error（功能（错误）{
                        $ scope.projectManagers ='[noaccess下]';
                    }）;
        }）;
    ＆LT; / SCRIPT＆GT;    ＆LT;风格类型=文/ CSS范围＆GT;
        .projectManagerArea {
            边框：1px的固体#ddd;
            背景色：#eee;
            宽度：500像素;
            填充：10px的;
            边界半径：5像素;
        }
        .projectManagerArea H3 {
            字体大小：14px的;
            保证金：0;
            下边框：1px的固体#CCC;
        }
    ＆LT; /风格＆GT;
＆LT; / DIV＆GT;
 

解决方案

使用NG-如果不是NG-表演。伍秀仅仅是使用CSS来隐藏DOM元素，但仍试图创建它，而NG-如果将重新创建每当'projectManagers！='[noaccess下]''股利，并删除它时，条件不满意的。

 ＆LT; D​​IV CLASS =hasAccessNG-IF =！projectManagers ='[noaccess下]'＆GT;
 

Thanks to the answer to this question, I was able to make a DIV that gets its data from an AJAX call and if it receives an Error 401 from the backend, it will gracefully display a nice message.

However, I notice that when it gets a 401 error, even though it hides the div that displays the data that it would have received, I still see in Firebug that it is tries to display this data.

How can I tell AngularJS to not only hide this area but not execute anything in it at all?

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

解决方案

use ng-if instead of ng-show. Ng-show merely uses CSS to hide the DOM element, but still tries to create it, whereas ng-if will re-create the div whenever 'projectManagers != '[noAccess]'', and remove it when the condition isn't satisfied.

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

这篇关于如何获得AngularJS有条件不在一个div执行任何code？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！