![isolatedFoo]( "isolatedFoo")
本文介绍了当我将 Angular 的版本升级到 1.0.1 到 1.2.27 时，指令不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下内容可以在 demo 中运行.
这是html:
<h2>父范围</h2><输入 ng-model="foo"><i>//更新以查看父作用域如何与组件作用域交互</i>
<br><br><!-- attribute-foo 绑定到始终为的 DOM 属性一个字符串.这就是为什么我们将它包裹在花括号中它可以被插值.--><my-component attribute-foo="{{foo}}" binding-foo="foo"隔离表达式 foo="updateFoo(newFoo)" ><h2>属性</h2><div><strong>获取:</strong>{{isolatedAttributeFoo}}
<div><strong>设置:</strong><输入 ng-model="isolatedAttributeFoo"><i>//这不会更新父作用域.</i>
<h2>结合</h2><div><strong>获取:</strong>{{isolatedBindingFoo}}
<div><strong>设置:</strong><输入 ng-model="isolatedBindingFoo"><i>//这确实更新了父作用域.</i>
<h2>表达式</h2>
<div><输入 ng-model="isolatedFoo"><button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">提交</button><i>//这会调用父作用域上的函数.</i>
</my-component>
这是js:
var myModule = angular.module('myModule', []).directive('myComponent', function () {返回 {限制:'E'，范围:{/* 注意:通常我会设置我的属性和绑定同名但我想区分父作用域和隔离作用域.*/isolatedAttributeFoo:'@attributeFoo',isolatedBindingFoo:'=bindingFoo',isolatedExpressionFoo:'&'}};}).controller('MyCtrl', ['$scope', function ($scope) {$scope.foo = '你好！';$scope.updateFoo = 函数 (newFoo) {$scope.foo = newFoo;}}]);
这应该是指令中三种范围绑定的一个很好的例子.但是，当我尝试切换更高的角度版本时它不起作用 - (1.2.27).我怀疑指令中继承范围的阴影，但我不确定.
解决方案
这不会像您期望的那样工作.独立作用域被创建并提供给指令的 Link、Compile 和 Template 部分.但是，Element 本身中的 HTML 实际上并不是指令的一部分.这些 HTML 部分仍然绑定到父 $scope.如果您倾向于将隔离的作用域对象命名为相同的名称，那么您可能只是无意中针对 $scope 工作而没有注意到任何不良影响.如果您的 HTML 在 Template 中而不是在 Element 中，它将访问隔离范围.
例如，在 Element 中内联的 HTML 中，您可以调用 updateFoo()，但这在 内部是不可能的模板
The following could be run in demo here.
this is html:
<div ng-controller="MyCtrl"> <h2>Parent Scope</h2> <input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>
<br><br> <!-- attribute-foo binds to a DOM attribute which is always a string. That is why we are wrapping it in curly braces so that it can be interpolated. --> <my-component attribute-foo="{{foo}}" binding-foo="foo" isolated-expression-foo="updateFoo(newFoo)" > <h2>Attribute</h2> <div> <strong>get:</strong> {{isolatedAttributeFoo}} </div> <div> <strong>set:</strong> <input ng-model="isolatedAttributeFoo"> <i>// This does not update the parent scope.</i> </div> <h2>Binding</h2> <div> <strong>get:</strong> {{isolatedBindingFoo}} </div> <div> <strong>set:</strong> <input ng-model="isolatedBindingFoo"> <i>// This does update the parent scope.</i> </div> <h2>Expression</h2>
<div> <input ng-model="isolatedFoo"> <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button> <i>// And this calls a function on the parent scope.</i> </div> </my-component></div>
And this is js:
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'@attributeFoo',
isolatedBindingFoo:'=bindingFoo',
isolatedExpressionFoo:'&'
}
};
})
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.foo = 'Hello!';
$scope.updateFoo = function (newFoo) {
$scope.foo = newFoo;
}
}]);
This should be a good example for three kinds of scope binding in directives.However, it just doesn't work when I try to switch a higher angular version - (1.2.27). I suspect the shadow of the inherited scope within the directive, but I'm not sure of it.
解决方案
This isn't going to work the way you expect. Isolated Scopes are created and provided to the Link, Compile, and Template portions of a Directive. However, the HTML within the Element itself is not actually part of the Directive. Those HTML portions are still bound to the parent $scope. If you have a tendancy to name your isolated scope objects the same, you may have just been working against the $scope unintentionally and not noticed any ill effect. If your HTML was in a Template rather than inside the Element, it would access the isolate scope.
As an example, in the HTML that is inline in the Element, you can call updateFoo(), but that would not be possible from inside a Template
这篇关于当我将 Angular 的版本升级到 1.0.1 到 1.2.27 时，指令不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！