10

我对 Javascript 编程相当陌生，我只接触过 AngularJS。为了评估它，我决定编写一个简单的笔记应用程序。该模型非常简单，一个笔记列表，其中每个笔记都有一个标签、一个文本和一个标签列表。但是，我遇到了在嵌套指令的隔离范围之间传递数据的问题。

我有三个指令，注释、注释和标记器（定义具有相同名称的新元素）。他们每个人都使用一个孤立的范围。

notes 指令使用 ng-repeat 用 note 元素“渲染”它的每一个音符。

note 指令使用 tagger 元素来“渲染”标签列表。

note 指令定义范围：{ getNote: "&", ... } 以便将笔记实例从笔记列表传递到笔记控制器/指令。getNote(index) 函数在 note 指令的链接函数中调用。这很好用！

标记器指令定义范围：{ getTags: "&", ... } 以便将给定注释的标记列表传递给标记器控制器/指令。getTags 函数在 tagger 指令的链接函数中调用。这不起作用！

据我了解，问题在于指令的链接函数以不一致的顺序调用。调试应用程序显示链接函数按以下顺序调用：

  1. notes 指令中的链接函数（将 getNote 函数添加到 notes 范围）

  2. 第一个注释的 tagger 指令中的链接函数（在父注释范围内调用 getTags）函数

  3. 第一个注释指令中的链接函数（将 getTags 添加到范围）（在父注释范围内调用 getNote）

  4. 第二个注释的 tagger 指令中的链接函数（在父注释范围内调用 getTags）函数

  5. 第二个注释指令中的链接函数（将 getTags 添加到范围）（在父注释范围中调用 getNote）

这将不起作用，因为在 #2 中第一个注释的范围还没有 getTags 函数。

一个简单的例子可以在Plunker中找到。

因此，我的问题归结为：什么决定了在嵌套指令中调用链接函数的顺序。

（我在 tagger 指令中的 getTags 上使用 $watch 解决了这个问题......）

问候

4

2 回答 2

18

引用 Josh D. Miller 的话，他友善地回答了我遇到的类似问题：

" 只是一些技术说明。假设你有这个标记：

<div directive1>
  <div directive2>
    <!-- ... -->
  </div>
</div>

现在 AngularJS 将通过按特定顺序运行指令函数来创建指令：

指令1：编译

指令2：编译

指令1：控制器

指令1：预链接

指令2：控制器

指令2：预链接

指令2：链接后

指令1：链接后

默认情况下，直接的“链接”函数是后链接，因此外部指令 1 的链接函数在内部指令 2 的链接函数运行之前不会运行。这就是为什么我们说只有在 post-link 中进行 DOM 操作才是安全的。"

于 2013-08-28T14:59:27.053 回答
0

在单个元素上，链接函数的顺序由编译函数的顺序决定，而编译函数的顺序又根据priority指令定义对象的属性进行排序。

来源：http ://docs.angularjs.org/guide/directive

在具有嵌入的多个元素上：内部指令在外部指令之前进行评估。原因：嵌入的性质。

在具有兄弟姐妹的多个元素上：按从上到下的顺序执行。原因：$compile 的解析逻辑。

于 2013-08-18T06:00:20.130 回答