Question

如果用户没有查看DOM元素的权限，我试图制作一个销毁DOM元素的指令。我这样做如下：

angular
        .module('digital_equation.auth')
        .controller('AuthLoginController', AuthLoginController)
        .directive('ngPermission', ngPermissionDirective);

function ngPermissionDirective() {
    return {
        multiElement: true,
        scope: {
            ngPermission: '@'
        },
        restrict: 'A',
        link: function (scope, element, attributes) {
            scope.$watch('ngPermission', function (value) {
                console.log(value);
                //Access rootScope to get the current user permissions
                var permissions = scope.$root.globals.currentUser.role.settings.permissions;
                //Loop through permissions object to check if any permission is the same as the value sent to directive
                var keepGoing = true;
                angular.forEach(permissions, function (permission, key) {
                    if (keepGoing == true)
                    {
                        if (key == value) {
                            element.show();
                            keepGoing = false;
                        }
                        else {
                            element.hide();
                        }
                    }
                });
            })
        }
    };
}

HTML：

<div class="col-xs-12 col-md-9" ng-permission="manage_appointments"></div>

在这种情况下，例如，如果从rootScope获取的当前用户在其权限中没有权限“manage_appointments”，则应该销毁该div。你可以看到我只知道如何隐藏它但这还不够我需要它被销毁所以在页面检查这个div没有显示。我的第二个问题是console.log(value);返回undefined并不重要。我还需要一个关于访问rootScope的建议。如果我将rootScope作为参数传递到这里它可以工作，但我也无法通过范围..所以我该怎么办呢。

link: function(rootScope, element, attributes )

请记住，即使我在authController中声明我的指令，我也需要它在我的整个项目中可用。很抱歉描述，但这是我在AngularJs中的第一个自定义指令，我尝试了很多选项。谢谢大家的时间和帮助！

编辑：

scope.$watch('ngPermission', function (value)

这解决了我的问题，我的问题是未定义的值，但是当我尝试在两个不同的元素上使用该指令（一个被隐藏，一个被显示）时，它将执行我的指令的最后一次使用（显示在两者中）这个案例）。任何想法为什么会这样？

解决方案：

function ngPermissionDirective() {
    return {
        multiElement: true,
        priority: 900,
        scope: {
            ngPermission: '@'
        },
        restrict: 'A',
        link: function (scope, element, attributes) {
            scope.$watch('ngPermission', function (value) {
                console.log(value);
                //Access rootScope to get the current user permissions
                var permissions = scope.$root.globals.currentUser.role.settings.permissions;
                //Loop through permissions object to check if any permission is the same as the value sent to directive
                var keepGoing = true;
                angular.forEach(permissions, function (permission, key) {
                    if (keepGoing == true)
                    {
                        if (key == value) {
                            element.show();
                            keepGoing = false;
                        }
                        else {
                            element.remove();
                        }
                    }
                });
            })
        }
    };
}

Answer 1

尝试将scope.$watch(attributes.ngPermission, ...更改为scope.$watch('ngPermission', ...。

另一种方法可能是$observe - attributes.$observe('ngPermission', ...

角度自定义指令中的值未定义

1 个答案: