AngularJS Directive Resolve Expression in Attrubte

Question

So I have an attribute level directive that I use check permissions of users and hide element depending on the result of comparing the permissions. Here it is:

angular.module('mainApp').directive('ifPermission', function (authService, userInfoService) {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attributes) {

            var attr = $attributes.ifPermission;

           //Some other code

        }
    }
});

I then place it on any element:

<div class="card float-card has-pointer" if-permission="Phase|Insert" ng-click="onAddDeliverableClick()">

Now I want to add another attribute, however it is not a simple string, but a scope :

<div class="card float-card has-pointer" if-permission="Phase|Insert|{{Deliverable.RefDeliverable}}" ng-click="onAddDeliverableClick()">

However, this does not work. The expression does not evaluate in time. What can I try?

ArunM · Answer 1 · 2017-07-04T21:17:36.293

The interpolation will happen as it is accessed as attribute. Try binding the if-permission to the scope as below,

scope: { ifPermission: '&ifPermission' }

or use $parse. More information provided in below question.

How to get evaluated attributes inside a custom directive


Probably, you are missing the scope object. How are you accessing the mainApp scope. Is there a controller defined in the page?.
HTML:
----------

    <body ng-app="mainApp" ng-controller="main">
       <div class="card float-card has-pointer" if-permission="Phase|Insert|{{Deliverable.RefDeliverable}}">
       </div>
    </body>

JS:
----

    angular.module('mainApp',[]);
    angular.module('mainApp').controller('main',function($scope){
       $scope.Deliverable = {
       RefDeliverable : 'Permission'
       };
    }).directive('ifPermission', function () {
       return {
        restrict: 'A',
        link: function ($scope, $element, $attributes) {

            var attr = $attributes.ifPermission;
            console.log(attr);
           //Some other code

        }
    }


});

I tried both the scope and $parse trick from the linked article, couldn't get it to work. Can you post an example of my directive an example, perhaps i'm missing something. I edited my OG post to remove extra unnecessary. — Marnus Steyn, Jul 03 '17 at 17:56
I updated my answer. I'm new to stackoverflow, pardon my edits. — ArunM, Jul 04 '17 at 21:18

AngularJS Directive Resolve Expression in Attrubte

1 Answers1