从指令访问服务数据

Question

我正在尝试使用 Angular JS 显示或隐藏基于 Spring 安全角色的 HTML 元素。 为此，我创建了一个服务和指令。 我正在从服务器取回数据，但我无法访问我在服务中获得的数据。这是我的代码

    app.service('MyService', function($http, $rootScope) {
    this.data = [];
    var _this = this;

    $http.get('permissions').then(function data(response) {
        _this.data=response.data;
        console.log(response);
        $rootScope.$broadcast('MyServiceReady');
    })

/*  return  {
        permissionData: function(){
            return _this.data;
        }
    }*/
})

app.directive('allowed', [ 'MyService', function(MyService) {
    return function(scope, element, attr) {
        scope.$on('MyServiceReady', function() {

            $subScope = this;

            $subScope.status = false;
            $subScope.permissions=MyService.data;
            console.log(MyService.data);
            console.log("First:" + $subScope.status+" permission:"+attr.allowed);
            angular.forEach(permissions, function(item) {

                if (angular.equals(item, attr.allowed)) {

                    $subScope.status = true;

                }

            });


            console.log("last:" + $subScope.status);
            console.log(element);
            if (!$subScope.status) {
                $(element).hide();
            } else {
                $(element).show();
            }

        });
    };
} ]);

我尝试在服务中编写一个函数并访问它，但即便如此它也显示 MyService.permissionData 不是一个函数。 谁能解释我哪里出错了？

我正在尝试在上面的代码中执行三个任务。

1. 从服务器获取 Permissions 数组

2. 在获得数据之前不要创建指令。

3. 根据权限隐藏或显示元素。

我的 HTML 代码是：

    <button class="btn btn-primary" allowed="1002">ADD SOMETHING</button>

如果您有任何建议，请回复。

Answer 1

尝试从这两行中删除MyService：

return function(scope, element, attr, MyService) {
    scope.$on('MyServiceReady', function(MyService) {

您已经将MyService 注入到您的指令中，您没有将它传递给链接函数或事件处理程序。

现在您已经充实了您在问题中尝试做的事情，我想我有一个更好的答案供您查看。如果我没看错，你会得到一个整数数组，对应于按钮上的allowed 属性。如果数组不包含 allowed 中的值，则该按钮不可见。

这是您的指令的新版本：

.directive('allowed', function(MyService) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$on('MyServiceReady', function() {
                var allowed = false;
                angular.forEach(MyService.data, function(item) {
                    if(attrs.allowed === item){
                        allowed = true;
                    }
                });
                if(!allowed){
                    element.addClass('hidden');
                }
            });
        }
    }
})

这需要在您的 CSS 中使用 hidden 类和 display: none;。这是一个有效的JSFiddle 来说明该指令。我不得不伪造对您 API 的 $http 调用。这种方法的一个缺点是在服务调用您的 API 时按钮是可见的。最好默认隐藏它们，然后在允许用户时显示它们，而不是反之。