angular 自定义指令中的值未定义

Question

我试图制定一个指令，如果用户没有看到它的权限，就销毁 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); returns 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', ...

angular 自定义指令中的值未定义

Value undefined in angular custom directive

angularjs

angularjs-directive

angularjs-scope

angularjs-rootscope