Question

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

以下是代码：

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/

任何帮助都会受到赞赏，因为我找不到合适的工作，谢谢！：）

Answer 1

默认情况下，指令创建新的原型继承范围。原型继承意味着（简而言之）当读取此范围中不存在的属性时，Angular会尝试从父级读取它。在编写属性时，始终在此范围内编写。因此dir2会在dir1范围内创建范围。当dir2只读取ng-model属性时，它会从dir1的范围内读取它。写入时，它会写入自己的范围。 dir1对内部范围一无所知，因此只要在“指令2”文本框中键入内容，指令就会显示不同的值。

此外，使用ng-model="item" NOT 会引用dataService的值，因为它显然是预期的。它仅引用当前范围的item属性。使用`ng-model =“data.item”将解决您当前的问题。

说到上面的内容，使用Angular对自定义输入控件的支持会更好（IMO） - 定义ng-model的自己的“扩展名”，如“自定义”下的here所述控制例“。您的代码将变为：

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

这使得你的指令与他们正在编辑的实际表达式的联系更少，但代价是一些额外的工作。当你在它的时候，也去寻找孤立的范围，然后你的指令成为组件，真正独立于它们的上下文。 data.item在指令中是不可编辑的，只需使用隔离范围的=绑定。

当编辑内部指令时，另一个指令中的Angular Directive会停止更新

1 个答案: