AngularJS에서 조건부로 div에 코드를 실행하지 않으려면 어떻게해야합니까?

Question

답변 덕분에 this question에 대한 답변 덕분에 AJAX 호출에서 데이터를 가져 오는 DIV를 만들 수 있었고 백엔드에서 Error 401을 받으면 정상적으로 멋진 메시지가 표시됩니다.

그러나 401 오류가 발생하면받은 데이터를 표시하는 div를 숨기더라도이 데이터를 표시하려고 시도한다는 것을 계속 알 수 있습니다.

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-경우 대신 NG-쇼. Ng-show는 CSS 요소를 숨기기 위해 CSS를 사용하기 만하지만 ng-if는 'projectManagers! ='[noAccess] '가 될 때마다 div를 다시 생성하고 조건이 충족되지 않으면 제거합니다. 만족.

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