각도 지시문 내에서 데이터를 검색하기위한 약속 사용

Question

API에서 사용자 역할을 기반으로 요소를 숨기거나 표시하려고합니다. 지시문은 코드에서 data.roleName을 설정할 때 작동하지만 서비스로 설정하려고하면 나머지 지시문을로드하기 전에 약속을 해결해야하지만 "정의되지 않은 오류의 속성을 읽을 수 없습니다"코드는 다음과 같습니다. .

의 .js

app.directive('restrictTo', ['SecuritySvc', function (SecuritySvc) { 
return { 
    restrict: 'EA', 
    replace: true, 
    transclude: true, 
    scope: {}, 

    controller: ['$scope', '$attrs', '$q', 'SecuritySvc', function ($scope, $attrs, $q, SecuritySvc) { 
     var defer = $q.defer(); 
     defer.promise.then(function ($scope, SecuritySvc) { 
      $scope.data = SecuritySvc.getRole(); 
     }); 
     defer.resolve(); 

     if ($scope.data.roleName == $attrs.restrictTo) { 
      $scope.allowed = true; 
     } else { 
      $scope.allowed = false; 
     } 
     console.log($scope.data); 



    }], 
    template: '<div ng-show="{{ $scope.allowed }}" ng-transclude></div>' 
} 
}]); 

.html 중에서 당신의 SecuritySvc이거나 반환. 난 당신이 방법처럼 그것을해야 생각

<div restrict-to="customer"> 
     <div class="hero-unit"> 
      <h1>Welcome!</h1> 
      <p>Hello, valued customer</p> 
     </div> 
    </div> 
    <div restrict-to="Admin"> 
     <div class="hero-unit"> 
      <h1>Admin Tools</h1> 
      <p>This shouldn't be visible right now</p> 
     </div> 
    </div> 

Answer 1

당신이 Q/연기를 사용하려는 해달라고 $ 리소스를 사용하는 경우는이 방법을 수행 할 수 있습니다

app.directive('restrictTo', ['SecuritySvc', function (SecuritySvc) { 
return { 
    restrict: 'AE', 
    replace: true, 
    transclude: true, 
    scope: {}, 
    controller: ['$scope', '$attrs', 'SecuritySvc', function ($scope, $attrs, SecuritySvc) { 
     $scope.allowed = false; 
     SecuritySvc.getMyRole().$promise.then(function (data,attrs) { 
      if (data.roleName == $attrs.restrictTo) { 
       $scope.allowed = true; 
      } else { 
       $scope.allowed = false; 
      } 
     }); 
    }], 
    template: '<div ng-show="allowed" ng-transclude></div>' 
}; 

}]);

Answer 2

확실하지 않음 이 :

var defer = $q.defer(); 
    defer.resolve(SecuritySvc.getRole()); 
    defer.promise.then(function (data) { 
     $scope.data = data; 
     if ($scope.data.roleName == $attrs.restrictTo) { 
      $scope.allowed = true; 
     } else { 
      $scope.allowed = false; 
     } 
     console.log($scope.data); 
    });