孤立的范围陷阱与ng模型依赖

Question

那么,由于AngularJS文档站点上的"改进此文档"按钮不起作用,现在讨论已经关闭,我想问一个关于ngModelController的 "孤立范围陷阱"段落的问题.

<div ng-app="badIsolatedDirective">
  <input ng-model="someModel"/>
  <div isolate ng-model="someModel"></div>
  <div isolate ng-model="$parent.someModel"></div>
</div>

angular.module('badIsolatedDirective', [])
  .directive('isolate', function() {
    return {
      require: 'ngModel',
      scope: { },
      template: '<input ng-model="innerModel">',
      link: function(scope, element, attrs, ngModel) {
        scope.$watch('innerModel', function(value) {
          console.log(value);
          ngModel.$setViewValue(value);
        });
      }
    };
});

我希望看到第三个输入影响第一个输入(因为我们只是隔离了第二个输入的范围并且没有引用'someModel'范围值),这个例子的btw行为只是惊人:第二个输入影响第一个,第三个输入影响第一个.所以问题是:我是丢失这个概念还是只是不理解它,或者在示例代码中有错误(可能不是错误,但只是没有与主题相关联)(好吧,我在Plunkr上更改了它它像我预期的那样工作).

Answer 1

在1.2.0及时交付中,对于同一元素上的多个隔离范围指令如何工作发生了重大变化(此处).这种变化显然没有反映在他们的文档中.

在1.2.0之前,如果任何指令请求隔离范围,则元素上的所有指令都共享隔离范围.因此,在上面的示例中,该ngModel指令共享了该isolate指令的范围.这就是我们必须像这样引用父范围的原因 - ng-model="$parent.someModel"

这在1.2.0中已不再适用.

在1.2.0及更高版本中,ngModel指令不再与范围共享isolate. ngModel现在位于isolate指令的父范围内.因此我们现在需要ng-model="someModel"代替ng-model="$parent.someModel"

这是他们对变化的描述(请记住,当你读到这ngModel是一个指令):

使隔离范围真正隔离 修复问题与隔离范围泄漏到同一元素上的其他指令.

隔离范围现在仅可用于请求它的isolate指令及其模板.

非隔离指令不应该在同一元素上获取isolate伪指令的isolate范围,而是接收原始范围(它是新创建的隔离范围的父范围).

突破性更改:没有隔离范围的指令不会从同一元素上的isolate指令获取隔离范围.如果您的代码依赖于此行为(非隔离指令需要从隔离范围内访问状态),请更改isolate指令以使用范围本地明确地传递这些.

之前

<input ng-model="$parent.value" ng-isolate>

.directive('ngIsolate', function() {   return {
    scope: {},
    template: '{{value}}'   }; });

后

<input ng-model="value" ng-isolate>

.directive('ngIsolate', function() {   return {
    scope: {value: '=ngModel'},
    template: '{{value}}   }; });

这是一个运行1.2.0-rc3(此更改之前的最后一个版本)的版本,其操作类似于他们的文档描述:http: //jsfiddle.net/5mKU3/

紧接着,1.2.0稳定后,我们不再需要或想要"$ parent"的引用:http://jsfiddle.net/5mKU3/1/