angularjs - 具有简单 angularjs 嵌套指令的隔离范围

Question

Please check this plnkr

我已经阅读了有关指令、范围和隔离范围的所有内容。但我仍然无法理解如何完成这项工作。

只要我创建的指令没有嵌套在另一个指令中，它就可以完美地工作。

嵌套时，'localFunc: "&func"' 属性绑定(bind)到外部 Controller 范围就好了，但 'localAttr: "=attr"' 范围失败。

如果有人能帮助我理解原因，我将不胜感激。

Answer 1

从图形上看，在我们输入任一文本框之前，您的作用域如下所示:


请注意，隔离范围 006 的父级是由指令 container 创建的嵌入范围。 .因此，searchText在范围 006 中将数据绑定(bind)到范围 005(而不是范围 003)，因为正在使用原语。

如果我们输入 11进入第一个文本框，22进入第二个文本框并再次检查范围，我们可以看到数据绑定(bind)发生的位置:


searchforThis2在范围 005 中显示为黄色，表示已创建新属性。发生这种情况是因为使用了原语——范围 005 在这里不使用原型(prototype)继承，它只是在自身上创建一个新的原语属性(即，它不在范围 003 中查找属性名称)。其他黄色项目表示原始值已更改。

正如您已经发现的那样，此问题的“最佳实践”解决方案是绑定(bind)到父范围(即范围 003)中的对象属性(而不是原语)。

在您的 Controller 中使用以下内容:

$scope.obj = {searchforThis1: "Sample Text 1", searchforThis2: "Sample Text 2"};

并在您的 HTML 中:

<search searchtext="obj.searchforThis1"...>
...
<div container>
  <search searchtext="obj.searchforThis2"...>

范围现在如下所示:


如果我们输入 11进入第一个文本框， 22进入第二个文本框并再次检查范围，我们可以看到数据绑定(bind)发生的位置:



因为范围 006 是一个隔离范围，所以它使用它的 $parent到达范围 005(如上)。然而，从那里开始，原型(prototype)继承开始发挥作用，因为我们没有使用原语。对象属性 searchforThis2位于范围 003 中。