passing parameter to directive in Angularjs

Question

I have the following directive:

angular.module('SuperCtrl').directive('listDirective',function(){
  return {
    restrict:'E',
    scope: {
      title:"="
    },
    templateUrl: '../templates/listWidget.html'
  };
});

I want to be able to reuse it and to do this I want to be able to pass parameter as a title.

In the template I have this fragment:

<h3 class="voice voice-brand pull-left" style="font-weight:bold">{{title}}</h3>

then in index.html:

<list-directive title="test1" ng-show="eventsActive"></list-directive>

But when I open this page I just see {{title}}.

What is the correct way to pass "title"?

Thanks!

thanks @MariaInesParnisari I confused myself for a moment, I was doing it that way. Please could you take another look? — Matt Boyle, Jan 09 '17 at 13:45
if you see {{title}} when the browser renders the page I think that you have some js issue — Marco Moretti, Jan 09 '17 at 13:46
No it works elsewhere @MarcoMorelliMoretti.. It is for sure a syntax issue. Other angular elements are rendering fine. — Matt Boyle, Jan 09 '17 at 13:47
what about link function , seems like you are not added a link function — AhammadaliPK, Jan 09 '17 at 13:47

Ovidiu Dolha · Accepted Answer · 2017-01-09T13:54:09.837

4

Note that title is a HTML attribute so avoid using this name for a directive input, unless you use the data-title syntax. Also, = scope data is used for 2-way binding which is not the case here (you just need a string) - in this case it's easier to use the @ string value declaration. So:

scope:{
  listTitle: "@"
},

And

<list-directive list-title="test1"  ng-show="eventsActive"></list-directive>

And

<h3 class="voice voice-brand pull-left" style="font-weight:bold">{{listTitle}}</h3>

This should fix it.

edited Jan 09 '17 at 13:54

answered Jan 09 '17 at 13:48

Ovidiu Dolha

5,335
1
21
30

Thanks for the help, I now no longer see {{title}} but I also don't see my defined title...its just blank. Any further suggestions? Dev consoles no clues. – Matt Boyle Jan 09 '17 at 13:53
1

well you also need to use `{{listTitle}}` – Ovidiu Dolha Jan 09 '17 at 13:53

passing parameter to directive in Angularjs

1 Answers1