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不是一个函数。谁能解释我哪里出错？

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

从服务器获取权限数组
在获得数据之前不要创建指令。
根据权限隐藏或显示元素。

我的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时，按钮是可见的。默认情况下隐藏它们可能会更好，然后在允许用户时显示它们而不是相反。

从指令访问服务数据

1 个答案: