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
– Matt Boyle, Commented Jan 9, 2017 at 13:45
if you see {{title}} when the browser renders the page I think that you have some js issue — Marco Moretti
– Marco Moretti, Commented Jan 9, 2017 at 13:46
No it works elsewhere @MarcoMorelliMoretti.. It is for sure a syntax issue. Other angular elements are rendering fine. — Matt Boyle
– Matt Boyle, Commented Jan 9, 2017 at 13:47
what about link function , seems like you are not added a link function — AhammadaliPK
– AhammadaliPK, Commented Jan 9, 2017 at 13:47

Ovidiu Dolha · Accepted Answer · 2017-01-09 13:54:09Z

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 9, 2017 at 13:54

answered Jan 9, 2017 at 13:48

Ovidiu Dolha

5,4132 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Boyle Over a year ago

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.

Ovidiu Dolha Over a year ago

well you also need to use {{listTitle}}

Collectives™ on Stack Overflow

passing parameter to directive in Angularjs

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related