Angular two different directives with same controller share scope

Question

I'm creating two directives which use the same controller, as a result I see that both directives share data among controller. What I want is that data to be UNIQUE per directive, so data shouldn't be shared.

var app = angular.module("app",[]);

app.controller('myCtrl', function($scope){
  $scope.data = {
    name: 'Javier'
  };
});


app.directive('dir1', function(){
  return {
    template: "<div style='background:red'><input type='text' ng-model='data.name'>{{data.name}}</div>",
    controller: "myCtrl"
  };
});


app.directive('dir2', function(){
  return {
    template: "<div style='background:yellow'><input type='text' ng-model='data.name'>{{data.name}}</div>",
    controller: "myCtrl"
  };
});

https://jsbin.com/vetikuvada/1/edit?html,js,output

So in my example I want is when I edit the text in one of the textboxes it doesn't trigger changes in the other textbox. I know that controllers are deployed with different instances but somehow they share the scope, I need this to be completely different. Is this possible?

The example is a small part of a very complex app, so I must be able to do it using this approach and no other else.

score 6 · Accepted Answer · edited May 23 '17 at 12:24

6

app.directive('dir1', function(){
  return {
    /* defines an isolated scope where state is
       not shared between other scopes */
    scope: {}, 

    template: "<div style='background:red'><input type='text' ng-model='data.name'>{{data.name}}</div>",
    controller: "myCtrl"
  };
});

Review this post for more information on defining how scopes can be initialized for directives.

edited May 23 '17 at 12:24

Community

1
1

answered Oct 01 '15 at 15:35

Alex

34,899
5
77
90

Thank you very, very, VERY much, it completly works :) – Manjar Oct 01 '15 at 15:56

score 0 · Answer 2 · answered Oct 01 '15 at 15:41

As you mentioned in the document they both share same scope object , no matter they are different instances or not but ng-modal point to same object . This is the default nature of angular the two way binding .

whenever the property in the scope object got updated . The ng-modal that refers got updated

Angular two different directives with same controller share scope

2 Answers2