document.ready 如何与 angular 元素指令一起使用？

Question

在我当前的项目中，我使用 angular 指令来创建自定义 html 元素。请参见下面的示例。

banner.js

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

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

Banner.html

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

问题： 有一个 javascript 文件向 document.ready 之后带有横幅图像 class 的元素添加额外的属性。这在使用 angular 元素指令之前非常有效，但不再添加属性。

问题： document.ready 回调是否发生在 angular 元素指令在 dom 中呈现之前？如果是这样，那就可以解释为什么我的 javascript 文件不再对 html 元素进行必要的更改。

谢谢

Answer 1

这不是一个 "directives" 问题，而是一个 Angular 事件序列问题。

Angular 本身（如果不是用 .bootstrap 手动启动）将延迟加载到 .onready.

在那个时间点，Angular 期望运行需要的所有 JS 都在那里并注册。

然后 Angular 启动。然后在 Angular 启动后，Angular 解析 DOM 以找到要附加到的根元素（带有 ng-app 指令的元素）。

然后它递归地沿线进行，注入控制器并构建指令并插入节点。

现在我们方式超过了 DOMReady 时触发的任何代码。

document.ready 如何与 angular 元素指令一起使用？

How does document.ready work with angular element directives?

html

javascript

browser

jquery

angularjs