Multiple same directive share the scope variable?

Question

Does controller share it's scope if I use the directive in one page multiple times? Although I think is not shared, I still want someone to help me understand this point.

If I define the variable 'isWidgetEnabled' in fooController, will it share in both two directives, if I want each directive 'foo' has its own variable, how can I do it?

js:

angular.module("module") .controller("fooController", ["$scope", function($scope) { ... }) .directive("foo", function() { return { restrict: "E", controller: "fooController", link: function($scope, $element, $attrs) { // Do some things with the scope of the controller here } } });

html:

<html> <head> <!-- Scripts here --> </head> <body ng-app="module"> <foo/> <foo/> </body> </html>

Tarun Dugar · Accepted Answer · 2016-01-20 06:30:15Z

1

Yes, it will be shared in all the directives, because the scope of your directive is inherited by default, which means that it shares the same scope as the controller.

answered Jan 20, 2016 at 6:30

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

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

9 Comments

huan feng Over a year ago

if i add scope:{}, it will not share?

Tarun Dugar Over a year ago

no, in that case each directive will have a separate isolate scope of themselves.

huan feng Over a year ago

how can i have a variable controlled in each own directive?Could you help to give more explaination:)

Tarun Dugar Over a year ago

Go through this: undefinednull.com/2014/02/11/…

huan feng Over a year ago

Although the real problem i met is not solved, your answer is very helpful.

|

Charlie · Accepted Answer · 2016-01-20 08:55:42Z

If you need to maintain a separate variable in the controller for each directive, you should pass these variables explicitly through the directive attributes and bind them to the isolated scope via Prefixes.

Here is an example. I have the foo directive in this code and the directive is used in two places in the dom. The directive modifies a scope variable depending on an attribute of the dom element it is caled.

The code is set to set the html of the <span> elements with the html of the directive elements.

<div ng-controller="fooController"> <div foo scopevar="dir1Data">Div1</div> <!--Here you tell which controller variable to effect by the directive--> <div foo scopevar="dir2Data">Div2</div> <span>{{dir1Data}}</span><br> <span>{{dir2Data}}</span> </div>

And your angular code

.controller('fooController', function($scope) { $scope.dir1Data = ''; $scope.dir2Data = ''; }) .directive('foo', function(){ return { scope: { //You set the prefix "=" here. This tells angular the variable name //mentioned in the scopevar attribute should be two-way bound //to the controller scope scopevar:'=' }, link: function(scope, ele, attr) { scope.scopevar = ele.html(); //Here I modify the controller variable } } })

Collectives™ on Stack Overflow

Multiple same directive share the scope variable?

2 Answers 2

9 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Linked

Related