好吧,因为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上更改了它)使它按预期工作。)
答案 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/