与NG-模型依赖隔离范围陷阱 [英] Isolated scope pitfall with ng-model dependency

问题描述

那么，既然改善这一文档按钮AngularJS文档站点无法正常工作和讨论已经结束，我想问一个有关的 ngModelController 。

Well, since 'improve this doc' button on AngularJS documentation site doesn't work and discussion is now closed, I'd like to ask a question about 'isolated scope pitfall' paragraph of 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行为是惊人的：第二个输入影响第一，第三没有按' ŧ什么影响。所以，问题是：我该失去的概念或只是不明白，或者有错误（也许，没有错误，但该主题只是没有连接）的例子code（好吧，我就改变了它 Plunkr ，使其工作如我所料）。

I expected to see the third input affecting first one (cause we just isolated second input's scope and have no reference to 'someModel' scope value), btw behavior of this example is just stunning: second input affects first, third doesn't affect anything. So the question is: am I loosing the concept or just don't understand it, or there are mistakes (maybe, not mistakes, but just no connection to the topic) in the example code (well, I changed it on Plunkr to make it work as I expected).

推荐答案

在1.2.0及时交货出现了重大的变化（<一个href=\"https://github.com/angular/angular.js/commit/909cabd36d779598763cc358979ecd85bb40d4d7\">here)如何隔离多次对同一元素的工作范围的指令，这种变化显然没有反映他们的文档中。

In 1.2.0 timely-delivery there was a major change (here) to how multiple isolate scope directives on the same element work. This change apparently hasn't been reflected in their documentation.

之前1.2.0元素上所有指令共享一个分离范围如果任何指令要求的分离范围。因此，在上述例子中的的 ngModel 指令共享隔离指令的范围即可。这就是为什么我们要引用父范围喜欢这个 - NG-模式=$ parent.someModel

Prior to 1.2.0 all directives on an element shared an isolate scope if any of the directives requested an isolate scope. Therefore in the above example the ngModel directive shared the isolate directive's scope. Which is why we had to reference the parent scope like this- ng-model="$parent.someModel"

这不再是真实的1.2.0。

That is no longer true in 1.2.0.

在1.2.0及以后在 ngModel 指令不再股范围隔离 。 ngModel 现在是在隔离指令的父范围。因此，我们现在需要 NG-模式=someModel而不是 NG-模式=$ parent.someModel

In 1.2.0 and beyond the ngModel directive no longer shares scope with isolate. ngModel is now on the parent scope of the isolate directive. Thus we now need ng-model="someModel" instead of ng-model="$parent.someModel"

下面是他们的变化（记住，当你阅读这说明了 ngModel 是一个指令）：

Here's their description of the change (keeping in mind as you read this that ngModel is a directive):

使分离范围分离真正
   修正了使用范围隔离泄漏所有的地方到其他指令
   上相同的元素

Make isolate scope truly isolate Fixes issue with isolate scope leaking all over the place into other directives on the same element.

隔离范围，现在只可用于请求它的分离指令
   和它的模板。

Isolate scope is now available only to the isolate directive that requested it and its template.

一个非分离指令不应该得到一个分离指令的适用范围分离
   相同的元件上，而不是他们将接收原来的范围（这是
   新创建的分离范围的父范围）。

A non-isolate directive should not get the isolate scope of an isolate directive on the same element,instead they will receive the original scope (which is the parent scope of the newly created isolate scope).

重大更改：无隔离范围指令没有得到
  从相同的元素分离株指令隔离范围。如果你的
  $ C $，c取决于这种行为（非分离指令需要访问
  从分离范围内状态），改变分离指令
  使用范围当地人明确地传递这些。

BREAKING CHANGE: Directives without isolate scope do not get the isolate scope from an isolate directive on the same element. If your code depends on this behavior (non-isolate directive needs to access state from within the isolate scope), change the isolate directive to use scope locals to pass these explicitly.

之前

<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。净/ 5mKU3 /

和后，1.2.0稳定，我们不再需要或想要的，在提及$父： HTTP：/ /jsfiddle.net/5mKU3/1/

And immediately after, 1.2.0 stable, we no longer need, or want, the reference to '$parent': http://jsfiddle.net/5mKU3/1/

这篇关于与NG-模型依赖隔离范围陷阱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！