angularjs share custom directive between two templates

Question

I have a custom directive with next params

 return {
        scope: {
            ngModel: '='
        },
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
    // directive code ...
}

and two templates which are using this directive

//template 1
  <div class="panel-body">
       <div ng-include src="'email.html'"></div>
  </div>

// email.html 
  <div id="template"
       ng-model="emailNotification"
       custom-directive></div>

// template 2
  <div class="panel-body">
       <div ng-include src="'sms.html'"></div>
  </div>

// sms.html 
  <div id="template"
       ng-model="smsNotification"
       custom-directive></div>

The problem here when I toggle between these two templates, ng-model inside 'custom-directive' doesn't refresh and value shares between two different ng-models. However I would like that directive wouldn't do that.

Where is my mistake and why does directive share this variable?

What do you mean by toggle between these two templates? Can you please set up a working fiddle to illustrate the problem you are facing? — Stanislav Kvitash
– Stanislav Kvitash, Commented Aug 9, 2017 at 19:14

Mike Feltman · Accepted Answer · 2017-08-09 19:28:21Z

1

When you use the = operator the directive's scope property binds to the parent's scope property by the same name. Since you are using ng-model on both instances of the directive inside the same parent, they both end up referencing the same ng-model.

If you want the evaluated value of the property from the parent scope, use @ binding.

return {
        scope: {
            ngModel: '@'
        },
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
    // directive code ...
}

edited Aug 9, 2017 at 19:28

answered Aug 9, 2017 at 19:18

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

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

1 Comment

antonyboom Over a year ago

So simple, this solved my problem! Thank you a lot, I appreciate it!

Ohjay44 · Accepted Answer · 2017-08-09 19:32:50Z

1

There are several different forms of scope for directives. You can use them all depending on the outcome you are expecting. They are scope: true, scope: {}, scope: false.

Each scope acts differently. The scope you are looking for is scope: {}, or scope: true.

If you do use scope: {} you want to ensure that the elements within are using the proper syntax =, @ and &. In your case you will want to use the @ symbol.

Explanation of symbols: Explanation

@: Pass this attribute as a string =: Data bind this property to the directive's parent scope. &: Pass in a function from the parent scope to be called later. Used to pass around lazily evaluated angular expressions.

answered Aug 9, 2017 at 19:32

Ohjay44

8977 silver badges20 bronze badges

Collectives™ on Stack Overflow

angularjs share custom directive between two templates

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related