具有简单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中.