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

查看 this post 以获取有关定义如何为指令初始化范围的更多信息。

Answer 2

正如您在文档中提到的，它们共享相同的范围对象，无论它们是否是不同的实例，但 ng-modal 指向相同的对象。这是 angular 双向绑定的默认特性。

每当范围对象中的属性更新时。引用的 ng-modal 已更新

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

Angular two different directives with same controller share scope

javascript

angularjs

angularjs-directive

angularjs-scope

angularjs-controller