如何与角元素指令的document.ready工作？ [英] How does document.ready work with angular element directives?

问题描述

在我当前的项目，我采用了棱角分明的指令来创建自定义HTML元素。参见下面的例子。

In my current project I'm using angular directives to create custom html elements. See example below.

banner.js

banner.js

app.directive('banner', function () {

    return {
        restrict: 'E',
        replace: true,
        templateUrl: './common/banner/banner.html'
    };
});  

Banner.html

Banner.html

<div>
    <div class="banner-image"></div>
</div>

问题：有，增加附加属性与之后的document.ready旗帜图像类元素的JavaScript文件。这工作完全采用了棱角分明的元素指令之前，但属性不再添加。

Issue: There is a javascript file that adds additional properties to elements with the banner-image class after document.ready. This worked perfectly before using angular element directives, but the properties are no longer being added.

问：的回调的d​​ocument.ready发生是否在DOM渲染前角元素的指令？如果是这样，这可以解释为什么我的JavaScript文件不再使对HTML元素进行必要的修改。

Question: Does the document.ready callback occur prior to angular element directives being rendered in the dom? If so, that could explain why my javascript file is no longer making the necessary changes to the html elements.

感谢您

推荐答案

这是少了指令的问题和事件，问题更大的角度序列。

This is less a "directives" question, and more an Angular sequence of events question.

角本身（如果不手动启动与 .bootstrap ）将推迟装载直到 .onready 。

Angular itself (if not manually started with .bootstrap) will defer its loading until .onready.

在那个时间点，角期望所有的JS它需要运行将在那里和注册。

At that point in time, Angular expects that all JS it needs to run will be there and registered.

然后角启动。
角启动此后，角度解析DOM找到根元素附加到（一个与 NG-应用指令）。

然后递归下降线，注射控制器和扩建指令和内插节点，因为它去。

Then it recursively goes down the line, injecting controllers and building out directives and interpolating nodes as it goes.

现在我们的办法的以往任何code，它会在domready中解雇了。

Now we are way past any code that would have fired on DOMReady.

这篇关于如何与角元素指令的document.ready工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！