Javascript 编辑内部指令时，另一个指令内的角度指令停止更新

所以我在另一个指令中有一个指令。两个指令都使用使用服务共享的相同属性，并且它们都有一个用于编辑此属性的输入。外部指令使用“transclude”来显示内部指令。编辑外部指令时，内部指令将正确更新。但是，当更新内部指令时，连接似乎丢失了

代码如下：

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope, dataService) {
});

myApp.directive('dir1', function(dataService){
  return {
    restrict: 'E',
    transclude:true,
    template: '<h3>Directive 1</h3><input type="text" ng-model="item"/><div ng-transclude></div>',
    link: function(scope, elem, attr) {
      scope.data = dataService;
    }
  };
});

myApp.directive('dir2', function(dataService){
  return {
    restrict: 'E',
    template: '<h3>Directive 2</h3><input type="text" ng-model="item"/>',
    link: function(scope, elem, attr) {
      scope.data = dataService;
    }
  };
});

myApp.factory('dataService', [function(){
  return { item: "" };
}]);

var myApp=angular.module（'myApp'，[]）；
控制器（'MyCtrl'，函数（$scope，dataService）{
});
myApp.指令（'dir1'，函数（数据服务）{
返回{
限制：'E'，
是的，
模板：“指令1”，
链接：功能（范围、要素、属性）{
scope.data=数据服务；
}
};
});
myApp.指令（'dir2'，函数（数据服务）{
返回{
限制：'E'，
模板：“指令2”，
链接：功能（范围、要素、属性）{
scope.data=数据服务；
}
};
});
myApp.factory（'dataService'，[function（））{
返回{item:：}；
}]);

这是它的观点：

<div ng-controller="MyCtrl">
  <dir1>
    <dir2>

    </dir2>
  </dir1>
</div>

我打了个手势来表示我的问题

---

任何帮助都将不胜感激，因为我还找不到工作，谢谢！：）

默认情况下，指令创建新的、原型继承的作用域。原型继承（简而言之）意味着，当读取此范围中不存在的属性时，Angular会尝试从父级读取该属性。写入属性时，它始终写入此范围。因此

dir2

在

dir1

的范围内创建一个范围。当

dir2

仅读取

ng model

属性时，它从

dir1

的范围中读取该属性。当它写入时，它会写入自己的范围

dir1

对内部范围一无所知，因此只要在“Directive 2”文本框中键入内容，指令就会显示不同的值

此外，使用

ng model=“item”

不会引用

数据服务的值，因为这显然是有意的。它仅引用当前范围的
项
属性。使用`ng model=“data.item”将解决您当前的问题


如上所述，使用Angular对自定义输入控件的支持将是一个更好的主意（IMO）——如“自定义控件示例”中所述，定义您自己的
ng模型
的“扩展”。您的代码将类似于：

<dir1 ng-model="data.item" />
<dir2 ng-model="data.item" />



这会减少指令与它们正在编辑的实际表达式之间的耦合，从而牺牲一些额外的工作。当您使用它时，也可以使用独立的作用域，这样您的指令就变成了组件，真正独立于它们的上下文。如果指令中的
数据项
不可编辑，请使用隔离作用域的
=
绑定。
非常感谢！我仍在掌握角度的诀窍，但你的解释帮助我理解了发生的事情！再次感谢：）