angularjs – 当angular.js完成加载时发送事件

想知道什么是最好的方式来检测页面加载/ bootstrapping的完成，当所有指令完成编译/链接。

任何事件已经有？我应该重载引导功能吗？

只是一个hunch：为什么不看看如何ngCloak指令呢？显然，ngCloak指令管理在加载后显示内容。我打赌看ngCloak会导致确切的答案…

编辑1小时后：
好吧，我看着ngCloak，它真的很短。这显然意味着编译函数将不会被执行，直到{{template}}表达式已被评估(即它加载的模板)，因此ngCloak指令的漂亮的功能。

我的教育猜测将是只是做一个指令与同样简单的ngCloak，然后在你的编译函数做任何你想做的。 :)将指令放在应用程序的根元素上。你可以调用类似myOnload的指令，并将其用作属性my-onload。一旦模板被编译(表达式计算和子模板加载)，编译函数将执行。

编辑，23小时后：
好的，所以我做了一些研究，我也asked my own question.我问的问题是间接与这个问题，但它巧合导致我的解决这个问题的答案。

答案是，你可以创建一个简单的指令，并把你的代码在指令的链接函数，(对于大多数使用情况下面解释)将运行时，你的元素就绪/加载。基于Josh’s description of the order in which compile and link functions are executed，

if you have this markup:

06000

Then AngularJS will create the directives by running directive
functions in a certain order:

06001

By default a straight “link” function is a post-link,so your outer
directive1’s link function will not run until after the inner
directive2’s link function has ran. That’s why we say that it’s only
safe to do DOM manipulation in the post-link. So toward the original
question,there should be no issue accessing the child directive’s
inner html from the outer directive’s link function,though
dynamically inserted contents must be compiled,as said above.

从这里我们可以得出结论，当一切准备就绪/编译/链接/加载时，我们可以简单地做一个指令来执行我们的代码：

app.directive('ngElementReady',[function() {
        return {
            priority: -1000,// a low number so this directive loads after all other directives have loaded. 
            restrict: "A",// attribute only
            link: function($scope,$element,$attributes) {
                console.log(" -- Element ready!");
                // do what you want here.
            }
        };
    }]);

现在你可以做的是将ngElementReady指令放到应用程序的根元素上，并且console.log将在加载时触发：

<body data-ng-app="MyApp" data-ng-element-ready="">
   ...
   ...
</body>

就是这么简单！只是做一个简单的指令，使用它。

原文地址：https://www.jb51.cc/angularjs/147136.html

上一篇：angularjs – ng-model,ng-repeat和下一篇：AngularJs基础

angularjs – 当angular.js完成加载时发送事件

相关推荐