具有ng模型依赖性的孤立作用域陷阱

Isolated scope pitfall with ng-model dependency

本文关键字：作用域 陷阱 ng 模型 依赖性 具有      更新时间：2024-01-26

好吧，由于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"作用域值），顺便说一句，这个例子的行为非常惊人：第二个输出会影响第一，第三个不影响任何东西。所以问题是：我是失去了这个概念，还是只是不理解它，或者在示例代码中有错误（也许不是错误，但只是与主题没有联系）（好吧，我在Plunkr上更改了它，使其按预期工作）。

在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是一个指令）：

使隔离范围真正隔离修复了隔离范围到处泄漏到其他指令中的问题在同一个元素上。

隔离作用域现在仅可用于请求它的隔离指令及其模板。

非隔离指令不应获得隔离指令的隔离范围相反，在同一个元素上，它们将接收原始范围（即新创建的隔离作用域的父作用域）。

BREAKING CHANGE：没有隔离范围的指令不会获得将作用域与同一元素上的隔离指令隔离开来。如果您代码取决于此行为（非隔离指令需要访问隔离范围内的状态），将隔离指令更改为使用scope 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/

相关文章：