check value of isolated scope variable in link function - directives in angular

Question

I have the following html:

<div class="jumbotron" ng-controller="protocolCtrl as pctrl">

    <!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->

    <modal-directive list="pctrl" headers="['ID', 'Protocol']"></modal-directive>

</div>

In my modal-directive.html, in the body, I do this:

<!-- Modal body-->

<div class="modal-body">

    <table-directive list=list headers=headers></table-directive>

</div>

I want to check on the list parameter i pass in. if it's equal some value, I want to append some html to the body

My directive looks like this

.directive('modalDirective', function(){
    return {
        restrict: 'E',
        templateUrl: '/directives/modal-directive.html',
        scope: {
            list: '=',
            headers: '='
        },
        link: function(scope, element, attrs){
            if(scope.list == 'pctrl'){
                element.find('.modal-body').append('This is just a test.')
            }
        }
    };
});

But this doesn't append anything. If I drop the if check it appends just fine.

I'm fairly new to angular, so if anyone can tell me how I can achieve this, I'd appreciated it.

Edit

this is how i loop through the data in my table-directive.html

 <tr ng-repeat="l in list.list">

     <!--Access the actual values inside each of the objects in the array-->

     <td ng-repeat="data in l"> {{ data }} </td>

     <td>
         <button type="button" class="btn btn-primary btn-sm"
                 data-toggle="modal">Edit</button>
     </td>

     <td>
        <button type="button" class="btn btn-danger btn-sm" ng-click="list.removeData(l)"
                    data-dismiss="modal">Remove</button>
     </td>

 </tr>

score 2 · Accepted Answer · edited May 23 '17 at 12:01

2

if you put

<modal-directive list="pctrl" headers="['ID', 'Protocol']"></modal-directive>

and

....
  scope: {
        list: '=',
        headers: '='
    },
.....

list: '=' check for the list attr of the element and execute the argument as a expression not as a string i think your trying to get 'pctrl' as a string not as a scope variable value so that change to list="'pctrl'" to pass as a string

<modal-directive list="'pctrl'" headers="['ID', 'Protocol']"></modal-directive>

OR

get the attr as a string use @

....
  scope: {
        list: '@',
        headers: '='
    },
.....

here is a good Explanation.

here is the angular official DOC

update

if you need to check only the string value of the attr, then you can simply use attrs.list

so use it inside the directive as

if(attrs.list === 'pctrl'){
    element.find('.modal-body').append('This is just a test.')
}

edited May 23 '17 at 12:01

Community

1
1

answered Jul 17 '15 at 10:16

Kalhan.Toress

21,683
8
68
92

hm, that made the if check work. But now it won't display any data in my table-directive. I'm using the `pctrl` to loop through an array as well. So it it possible to just check the equality of the object itself or something? – Nilzone- Jul 17 '15 at 10:21
how do you do it in `table-directive` ? – Kalhan.Toress Jul 17 '15 at 10:23
do you have something `$scope.list` in the controller ? – Kalhan.Toress Jul 17 '15 at 10:25
ah - awesome! And now I can the `=` instead of `@` yes? – Nilzone- Jul 17 '15 at 10:32
last question if you don't mind - If I want to append on another directive - is there something else that I need to in order to make that work? – Nilzone- Jul 17 '15 at 10:37
glad to help you, but one point, angular directives are reusable, so you can use this directive multiple times in your app, so may be this `` code lays in different controllers so in all the controllers you have to use `list="pctrl"` and there should be a exact the same variable name as `$scope.pctrl` because your considering the variable name as `attrs.list` so its leading to a bad practice, if you can declare a another attr to detect `pctrl` or not it would be better just a suggestion, may be your case is different – Kalhan.Toress Jul 17 '15 at 10:40
umm im not clear about what u asked can you please describe it a bit :) `If I want to append on another directive`? – Kalhan.Toress Jul 17 '15 at 10:41
the modal-directive is suppsoed to able to work with multiple different controllers, so I think this is pretty reusable :) Reagarding my last question - never mind, I figures it out :) – Nilzone- Jul 17 '15 at 10:44

check value of isolated scope variable in link function - directives in angular

1 Answers1