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之后使用banner-image类为元素添加其他属性。这在使用angular元素指令之前完美地工作，但不再添加属性。

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

谢谢

Answer 1

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

Angular本身（如果不是用.bootstrap手动启动的话）会将其加载推迟到.onready。

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

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

然后它递归地向下移动，注入控制器并构建指令并插入节点。

现在我们方式过去任何会在DOMReady上触发的代码。