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

时间:2013-12-02 09:11:43

标签: javascript angularjs

好吧,因为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行为只是令人震惊:第二个输入影响第一个,第三个输入影响第一个影响任何事情。所以问题是:我是丢失这个概念还是只是不理解它,或者在示例代码中有错误(可能不是错误,但与主题无关)(好吧,我在{{3上更改了它)使它按预期工作。)

1 个答案:

答案 0 :(得分:5)

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

在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指令更改为   使用范围locals明确传递这些。

之前

<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/