angularjs - 嵌套和重复的angularjs指令中链接函数的调用顺序

标签 angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

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

我有三个指令,注释,注释和标记(定义具有相同名称的新元素)。他们每个人都使用隔离范围。

notes指令使用ng-repeat来“渲染”其每个带有note元素的注释。

note指令使用tagger元素“呈现”标签列表。

note伪指令定义范围:{getNote:“&”,...},以便将注释实例从注释列表传递到注释 Controller /指令。在note指令的链接函数中调用getNote(index)函数。这样很好!

tagger指令定义范围:{getTags:“&”,...},以便将给定注释的标签列表传递给tagger Controller /指令。在tagger指令的链接函数中调用getTags函数。这行不通!

据我了解,问题在于指令的链接函数以不一致的顺序被调用。对该应用程序进行调试,显示链接函数按以下顺序调用:

notes指令中的

  • 链接功能
    (将getNote函数添加到notes范围)
  • 第一个注释的tagger指令中的
  • 链接函数
    (在父注释范围内调用getTags)函数
  • 第一个note指令中的
  • 链接函数
    (将getTags添加到范围)
    (在父注释范围中调用getNote)
  • 第二个注释的tagger指令中的
  • 链接函数
    (在父注释范围内调用getTags)函数
  • 第二个note指令中的
  • 链接功能
    (将getTags添加到范围)
    (在父注释范围中调用getNote)

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

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

    因此,我的问题可以归结为:是什么决定了嵌套指令中链接函数的调用顺序。

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

    问候

    最佳答案

    引用乔什·米勒(Josh D. Miller)的话,他对我曾经回答过的类似问题很友好:

    “仅是一些技术说明。假设您具有以下标记:

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

    现在,AngularJS将通过以一定顺序运行指令函数来创建指令:

    directive1: compile

    directive2: compile




    指令1: Controller

    指令1:预链接

    directive2: controller

    directive2: pre-link

    directive2: post-link




    指令1:链接后

    默认情况下,直接的“链接”功能是后链接,因此,外部指令1的链接功能将在内部指令2的链接功能运行后才能运行。这就是为什么我们说在后链接中进行DOM操作是唯一安全的原因。 ”

    关于angularjs - 嵌套和重复的angularjs指令中链接函数的调用顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18294726/

    相关文章:

    javascript - 为什么我的 $digest() 迭代次数达到了?如何跟踪递归脚本的事件?

    javascript - AngularJS 和 Adsense

    javascript - 在 angularjs 中有不同的页眉和页脚的最佳方法是什么?

    javascript - HTTP 获取后 angularJS 范围不更新

    javascript - 使用嵌套 ng-repeat 和动态 ng-model 作为对象

    angularjs - Angular4 上的嵌入和要求

    javascript - ng-class 不适用于带有 templateURL 的自定义指令

    javascript - Protractor 页面对象错误

    angularjs - 如何使用 Twitter typehead.js 和 Angular 编译功能?

    javascript - 自定义 AngularJS Bootstrap 工具提示