Value undefined in angular custom directive

Question

I tried to make a directive for destroying DOM elements if user doesn't have the permission to see it. I do this as follows:

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>

In this situations for example if the current user taken from rootScope doesn't have the permission "manage_appointments" among it's permission this div should be destroyed. As you can see I only know how to hide it but this is not enough I need it to be destroyed so on page inspect this div doesn't show up. My second problem is that console.log(value); returns undefined not matter what I tried. And I also need an advice upon accessing rootScope. If I pass the rootScope as parameter here it works but I cannot pass the scope as well.. so how can I do this.

link: function(rootScope, element, attributes )

Please keep in mind that even though I declare my directive in the authController I need it to be available in my entire project. Sorry for the description but it is my first custom directive in AngularJs and I tried a lot of options. Thank you all for your time and help!

Edit:

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

This solved my problem with value being undefined but when I try to use the directive on two different elements (one to be hidden and one to be shown) it will do whatever the last use of my directive is applied (show both in this case). Any ideas why this happens?

Solution:

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();
                        }
                    }
                });
            })
        }
    };
}

First, you are watching the attribute.yourValues, you should watch the scope. So: `scope.ngPermission`. Take a look at docs and examples to understand how binding and watching works. And about removing the DOM element, why not to use `ng-if` or wrap it with your directive? I think could be better to not fight with DOM manually. Hope it helps. — Ruben, May 03 '17 at 13:34

score 1 · Accepted Answer · answered May 03 '17 at 13:35

1

Try changing scope.$watch(attributes.ngPermission, ... to scope.$watch('ngPermission', ....

An alternative approach might be $observe - attributes.$observe('ngPermission', ...

answered May 03 '17 at 13:35

Vladimir Zdenek

2,270
1
18
23

This solved my problem with value being undefined but element.hide() is still not working. I don't know why because it accesses the show element when the right permission is sent but no matter what the div on which I use my directive disappears. – Alphonse May 03 '17 at 14:00
1

Sorry I did not reply to your comment before - I am on the phone. I am glad you made it work! – Vladimir Zdenek May 03 '17 at 14:22

Value undefined in angular custom directive

1 Answers1