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

Question

请检查这个plnkr

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

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

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

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

Answer 1

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

请注意，隔离范围 006 的父级是由指令创建的嵌入范围container。因此，searchText范围 006 中的数据将被数据绑定到范围 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 中。

Answer 2

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

感谢这篇非常有启发性的帖子，我了解到我的问题是如此普遍，解决方案甚至有一个名字——“点规则”。

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