CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopedirective
Matt Boyle
Matt Boyle

Reputation: 385

passing parameter to directive in Angularjs

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!

Upvotes: 0

Views: 118

Answers (1)

Ovidiu Dolha
Ovidiu Dolha

Reputation: 5413

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.

Upvotes: 4

Related Questions