angular.js 뷰에서 사용하기 전에 스코프 변수가 로드될 때까지 기다립니다.

angular.js 뷰에서 사용하기 전에 스코프 변수가 로드될 때까지 기다립니다.

이것저것 봐왔지만 더 간단한 방법이 있을 것 같아.

내 보기에는 권한을 통해 제어되는 몇 가지 메뉴 옵션이 있습니다. 즉, 모든 사용자가 "대시보드" 보기를 볼 수 있는 것은 아닙니다.뷰의 메뉴 옵션에는 다음과 같은 것이 있습니다.

<li ng-show="validatePermission('Dashboard')">Dashboard</li>

컨트롤러에는 현재 사용자의 권한을 확인하는 validate Permission 메서드가 정의되어 있습니다.예를 들어 다음과 같습니다.

  $scope.validatePermission = function(objectName) {
    if $scope.allPermissions......

또한 컨트롤러에서 $http 호출을 통해 다음 권한을 로드합니다.

  $http.get('permissions/' + userid + '.json').success(function(data) {  
    $scope.allPermissions = data;....

문제는 뷰가 validatePermission을 호출하기 전에 $scope.allPermissions가 로드되지 않는다는 것입니다.보기가 렌더링되기 전에 allPermissions가 로드될 때까지 어떻게 기다려야 합니까?

질문:

보기가 렌더링되기 전에 allPermissions가 로드될 때까지 어떻게 기다려야 합니까?

전체 보기가 렌더링되지 않도록 하려면 해결을 사용해야 합니다.단, $http는 약속을 반환하므로 약속 라이브러리를 사용할 필요는 없습니다.

var app = angular.module('app');

app.config(function ($routeProvider) { 
  $routeProvider
    .when('/', {
        templateUrl : 'template.html',
        controller : 'MyCtrl',
        resolve : MyCtrl.resolve
  });
});

function MyCtrl ($scope, myHttpResponse) {
   // controller logic
}

MyCtrl.resolve = {
  myHttpResponse : function($http) {
    return $http({
        method: 'GET',
        url: 'http://example.com'
    })
    .success(function(data, status) {
        // Probably no need to do anything here.
    })
    .error(function(data, status){
        // Maybe add an error message to a service here.
        // In this case your $http promise was rejected automatically and the view won't render.
    });
  }
}

단, 단순히 대시보드 <li>를 숨기는 경우에는 Joe Gauterin의 제안대로 합니다.필요하다면 여기 아주 간단한 예시가 있습니다.

을 가지다validatedPermission함수가 false를 반환하는 경우allPermissions로딩되지 않았습니다.그렇게 하면 그 요소가ng-show가 표시될 때까지allPermissions이 로드되었습니다.

또는,ng-show="allPermissions"동봉하여<ul>또는<ol>.

루트 컨트롤러에서 해당 루트를 렌더링하기 전에 해당 오브젝트의 해결을 기다리는 해결 오브젝트를 지정할 수도 있습니다.

각 문서에서 : https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

해결 - {개체}=} - 컨트롤러에 주입해야 하는 선택적 종속성 맵입니다.이러한 의존관계 중 하나가 약속일 경우 컨트롤러가 인스턴스화되고 $routeChangeSuccess 이벤트가 발생하기 전에 해결되어 값으로 변환됩니다.맵 오브젝트는 다음과 같습니다.

key: {string}: 컨트롤러에 삽입되는 의존관계 이름.공장 - {string| function :문자열일 경우 서비스의 에일리어스입니다.그렇지 않으면 기능이 삽입되어 반환값이 의존관계로 취급됩니다.결과가 약속일 경우 값이 컨트롤러에 주입되기 전에 해결됩니다.

구글 그룹 레퍼런스도 참조하십시오.https://groups.google.com/forum/ #!topic / angular / QtO8QoxSjYw

저도 비슷한 상황에 처했습니다.또한 다음 웹 사이트를 잠시 살펴보시기 바랍니다.

http://docs.angularjs.org/api/ng/directive/ngCloak

더 큰 효과를 볼 수 있습니다.

angularjs 설명서에 따르면:

ngCloak 지시어는 응용 프로그램 로드 중에 Angular html 템플릿이 원시(파일되지 않음) 형식으로 브라우저에 잠시 표시되지 않도록 하기 위해 사용됩니다.html 템플릿 표시로 인한 바람직하지 않은 깜박임 효과를 방지하려면 이 명령을 사용합니다.

코드를 ng로 포장합니다.문제를 해결한 경우:

<div ng-if="dependentObject">
  <!-- code for dependentObject goes here -->
</div>

언급URL : https://stackoverflow.com/questions/16617259/wait-until-scope-variable-is-loaded-before-using-it-in-the-view-in-angular-js