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

【问题标题】：Isolated scope with simple angularjs nested directive具有简单 angularjs 嵌套指令的隔离范围
【发布时间】：2013-03-30 14:22:38
【问题描述】：

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

只要不嵌套在另一个指令中，我创建的指令就可以完美运行。

嵌套时，'localFunc: "&func"' 属性可以很好地绑定到外部控制器作用域，但 'localAttr: "=attr"' 作用域失败。

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

【问题讨论】：

【解决方案1】：

如图所示，在我们输入任一文本框之前，您的作用域如下所示：

请注意，隔离作用域 006 的父作用域是由指令 container 创建的转置作用域。因此，范围 006 中的 searchText 将数据绑定到范围 005（而不是范围 003），因为正在使用原语。

如果我们在第一个文本框中输入11，在第二个文本框中输入22，然后再次检查范围，我们可以看到数据绑定发生的位置：

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

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

在您的控制器中使用以下内容：

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

在您的 HTML 中：

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

作用域现在如下所示：

如果我们在第一个文本框中输入11，在第二个文本框中输入22，然后再次检查范围，我们可以看到数据绑定发生的位置：

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

【讨论】：

【解决方案2】：

永不失败。在我真正输入问题之前，数小时的谷歌搜索没有任何结果，然后我得到了搜索关键字的组合，瞧！答案出现了。

感谢this very illuminating post 我了解到我的问题是如此普遍，以至于解决方案甚至有了一个名字 - “点规则”。

基本上你需要引用控制器上的继承对象而不是属性，问题就消失了。

【讨论】：