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

Question

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

banner.js

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

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

横幅.html

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

问题： 有一个 javascript 文件在 document.ready 之后向带有横幅图像类的元素添加附加属性。这在使用角度元素指令之前完美运行，但不再添加属性。

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

谢谢

Answer 1

这不是一个“指令”问题，而是一个 Angular 事件序列问题。

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

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

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

然后它递归地向下运行，注入控制器并构建指令和插值节点。

现在我们已经方式通过了任何会在 DOMReady 上触发的代码。