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

Question

Please check this plnkr

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

我创建的指令完全有效，只要它不嵌套在另一个指令中。

嵌套时，'localFunc：'＆amp; func“'属性绑定到外部控制器范围就好了，但'localAttr：”= attr“'范围失败。

如果有人能帮我理解原因，我会非常感激。

Answer 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中。

Answer 2

永远不会失败。谷歌搜索的时间没有任何变化，直到我实际输入问题，然后我得到了搜索关键字和瞧！答案出现了。

感谢this very illuminating post我了解到我的问题非常普遍，解决方案甚至还有一个名称 - “点规则”。

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