当编辑内部指令时，另一个指令中的Angular Directive会停止更新(Angular Directive inside another Directive stops updating when inner directive is edited)

 所以我在另一个指令中有一个指令。 这两个指令使用相同的属性，该属性使用服务共享，并且它们都有输入来编辑此属性。 outer指令使用“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: "" };
}]);
 
 这是它的观点： 
 
<div ng-controller="MyCtrl">
  <dir1>
    <dir2>

    </dir2>
  </dir1>
</div>
 
 我做了一个JSFiddle来展示我的问题http://jsfiddle.net/stevescerri/19L24uL6/2/ 
 
 感谢任何帮助，因为我找不到合适的工作，谢谢！ :) 

So I have a directive inside another directive. Both directives use the same property which is shared using a service and they both have an input to edit this property. The outer directive uses "transclude" to display the inner directive. When editing the outer directive, the inner directive updates correctly. But, when updating the inner directive, the connection seems to get lost.
 
Here is the code:
 
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: "" };
}]);
 
And this is it's view:
 
<div ng-controller="MyCtrl">
  <dir1>
    <dir2>

    </dir2>
  </dir1>
</div>
 
I made a JSFiddle to show my problem http://jsfiddle.net/stevescerri/19L24uL6/2/
 
Any help would be appreciated as I cannot find a work around yet, thanks! :)

原文：https://stackoverflow.com/questions/35267925