Angular两个不同的指令具有相同的控制器共享范围

Question

我正在创建两个使用相同控制器的指令,因此我看到两个指令在控制器之间共享数据.我想要的是每个指令的数据都是UNIQUE,因此不应该共享数据.

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

因此,在我的示例中,我想要的是当我在其中一个文本框中编辑文本时,它不会触发其他文本框中的更改.我知道控制器部署了不同的实例,但不知怎的,它们共享范围,我需要完全不同.这可能吗？

该示例是一个非常复杂的应用程序的一小部分,所以我必须能够使用这种方法而不是其他方法.

Answer 1

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"
  };
});

有关定义如何为指令初始化范围的更多信息,请查看此文章.