使用承诺的角度指令内检索数据 [英] Using a promise for retrieving data inside angular directive

问题描述

我工作的隐藏或显示基于从API用户角色的元素。该指令的作品，当我设置data.roleName在code，但是当我试图通过我的服务来设置它，我需要加载指令的其余部分之前解决一个承诺，虽然我不断收到无法读取未定义的错误性质这里的code。

的.js

  app.directive（'restrictTo'，['SecuritySvc'，函数（SecuritySvc）{
返回{
    限制：EA，
    更换：真实，
    transclude：真实，
    范围： {}，    控制器：['$范围，$ ATTRS'，'$ Q'，'SecuritySvc'，函数（$范围，$ ATTRS，$​​ Q，SecuritySvc）{
        变种延迟= $ q.defer（）;
        defer.promise.then（函数（$范围，SecuritySvc）{
            $ scope.data = SecuritySvc.getRole（）;
        }）;
        defer.resolve（）;        如果（$ scope.data.roleName == $ attrs.restrictTo）{
            $ scope.allowed = TRUE;
        }其他{
            $ scope.allowed = FALSE;
        }
        的console.log（$ scope.data）;    }]，
    模板：'＆LT; D​​IV NG秀={{$ scope.allowed}}NG-transclude＆GT;＆LT; / DIV＆GT;'
}
}]）;
 

的.html

 ＆LT; D​​IV限制到=客户＆GT;
        ＆LT; D​​IV CLASS =英雄机组＆GT;
            ＆LT; H1＆GT;！欢迎＆LT; / H1＆GT;
            ＆LT; P＆GT;您好，尊贵的客户和LT; / P＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV限制到=管理＆GT;
        ＆LT; D​​IV CLASS =英雄机组＆GT;
            ＆LT; H1＆GT;管理工具＆LT; / H1＆GT;
            ＆LT; P＆gt;这不应该是可见的，现在和LT; / P＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

解决方案

如果您不想使用Q /延迟，并使用$资源你可以这样来做：

  app.directive（'restrictTo'，['SecuritySvc'，函数（SecuritySvc）{
返回{
    限制：AE，
    更换：真实，
    transclude：真实，
    范围： {}，
    控制器：['$范围，$ ATTRS'，'SecuritySvc'，函数（$范围，$ ATTRS，SecuritySvc）{
        $ scope.allowed = FALSE;
        SecuritySvc.getMyRole（）。$ promise.then（功能（数据，ATTRS）{
            如果（data.roleName == $ attrs.restrictTo）{
                $ scope.allowed = TRUE;
            }其他{
                $ scope.allowed = FALSE;
            }
        }）;
    }]，
    模板：'＆LT; D​​IV NG秀=允许NG-transclude＆GT;＆LT; / DIV＆GT;'
};
 

}]）;

I am working on hiding or showing elements based on user role from an api. The directive works when I set the data.roleName in the code but when I try to set it by I service I need to resolve a promise before loading the rest of the directive though I keep getting "cannot read property of undefined errors Here's the code.

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

解决方案

If you dont want to use Q/defer and are using $resource you can do it this way:

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

}]);

这篇关于使用承诺的角度指令内检索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！