孤立的范围与简单的angularjs嵌套指令

Please check this plnkr

我已经阅读过,可以找到指令,范围和隔离范围。但是我仍然无法理解使这项工作的方式。

我创建的指令只要不嵌套在另一个指令中,就完美地工作。

当嵌套时,’localFunc:“& func”’属性绑定到外部控制器范围,但’localAttr:’= attr“’范围失败。

我会非常感激任何人可以帮助我理解为什么。

在图形上,这里是您的范围看起来像我们键入任何一个文本框:

请注意,隔离范围006的父级是由指令容器创建的转发范围。因此,范围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。

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...