使用 Promise 在 Angular 指令中检索数据

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

<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/defer 并且正在使用 $resource 你可以这样做：

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

不确定您的 SecuritySvc 是什么或返回什么。我认为你应该这样做：

    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);
    });