具有简单 angularjs 嵌套指令的隔离范围 [英] Isolated scope with simple angularjs nested directive
问题描述
我已经阅读了所有可以找到的关于指令、作用域和独立作用域的内容.但我仍然无法理解如何进行这项工作.
I have read everyhting can find about directives, scope and isolated scopes. But I still cannot understand the way to make this work.
我创建的指令可以完美运行，只要它不嵌套在另一个指令中.
The directive I created works perfectly as long as it is not nested within another directive.
嵌套时，'localFunc: "&func"' 属性绑定到外部控制器范围就好了，但 'localAttr: "=attr"' 范围失败.
When nested, the 'localFunc: "&func"' attributes bind to outer controller scope just fine but 'localAttr: "=attr"' scope fail.
如果有人能帮助我理解原因，我将不胜感激.
I would be ever so grateful is anyone can help me understand why.
推荐答案
从图片上看，在我们输入任一文本框之前，您的范围是这样的:
Pictorially, here is what your scopes look like before we type into either textbox:
请注意，隔离作用域 006 的父级是由指令 container 创建的嵌入作用域.因此，范围 006 中的 searchText 将数据绑定到范围 005(而不是范围 003)，因为正在使用原语.
Notice that isolate scope 006's parent is the transcluded scope that is created by directive container. As such, the searchText in scope 006 will be databound to scope 005 (rather than scope 003) because a primitive is being used.
如果我们在第一个文本框中键入 11，在第二个文本框中键入 22 并再次检查范围，我们可以看到数据绑定发生的位置:
If we type 11 into the first textbox, and 22 into the second textbox and examine the scopes again, we can see where the databinding took place:
searchforThis2 在范围 005 中显示为黄色，表示创建了一个新属性.发生这种情况是因为使用了一个原语——范围 005 在这里不使用原型继承，它只是在自身上创建一个新的原语属性(即，它不在范围 003 中查找属性名称).其他黄色项表示原始值已更改.
searchforThis2 is colored yellow in scope 005 to indicate that a new property was created. This happened because a primitive is used -- scope 005 does not use prototypal inheritance here, it just creates a new primitive property on itself (i.e., it does not look in scope 003 for the property name). The other yellow items indicate that the primitive values changed.
正如您已经发现的，此问题的最佳实践"解决方案是绑定到父作用域(即作用域 003)中的对象属性(而不是基元).
As you already discovered, the "best practice" solution to this problem is to bind to object properties (rather than primitives) in the parent scope (i.e., scope 003).
在您的控制器中使用以下内容:
Using the following in your controller:
$scope.obj = {searchforThis1: "Sample Text 1", searchforThis2: "Sample Text 2"};
并在您的 HTML 中:
and in your HTML:
<search searchtext="obj.searchforThis1"...>
...
<div container>
<search searchtext="obj.searchforThis2"...>
范围现在如下所示:
如果我们在第一个文本框中键入 11，在第二个文本框中键入 22 并再次检查范围，我们可以看到数据绑定发生的位置:
If we type 11 into the first textbox, and 22 into the second textbox and examine the scopes again, we can see where the databinding took place:
因为作用域 006 是一个隔离作用域，它使用它的 $parent 到达作用域 005(如上).然而，从那里开始，原型继承正在发挥作用，因为我们没有使用原语.对象属性 searchforThis2 位于作用域 003 中.
Because scope 006 is an isolate scope, it uses its $parent to get to scope 005 (like above). From there, however, prototypal inheritance is in play, since we are not using primitives. Object property searchforThis2 is located in scope 003.
这篇关于具有简单 angularjs 嵌套指令的隔离范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
