Question

我正在使用AngularJS，我想在完全渲染DOM时运行一些动作看来我可以观看'$ viewContentLoaded'事件或在文档上使用jQuery'ready'方法。

这两种方法中的哪一种是最好的方法，为什么？

var myapp = angular.module('myapp', [])
.run(function($document, $rootScope) {

    $rootScope.$on('$viewContentLoaded', function() {
        console.log('view content loaded');
    });

    $document.ready(function () {
        console.log('document ready');            
    });
});

Answer 1

$document.ready()是Angular之外的一个调用，当DOM准备好执行时，它会发生一次。 Angular对$location的更改不会调用它。因此，与Angular相关的此功能的唯一用途是，如果要手动使用angular.bootstrap()。由于Angular必须等待$document.ready()，即使使用ng-app，除了手动引导程序之外的任何代码都应由控制器处理。

$viewContentLoaded是一个Angular事件，它是ng-route module的一部分。只要重新加载ngView元素的内容，它就会由ng-view发出。事件是角度感知的，这意味着它会导致摘要周期，并且由于观看此事件而执行的任何代码都将影响内容视图。此外，每次加载新路径时都会发出此事件，而$document.ready()只会发出一次。

通常，如果你的目标是在app start初始化变量，那么在控制器中初始化变量是安全的选择。如果您的目标是在每次呈现新视图时初始化变量，通常也可以在控制器中为每个视图执行，但$viewContentLoaded是合理的后备。 $document.ready()几乎不应与Angular应用程序一起使用，因为它不是Angular感知功能。

Answer 2

如果您要查看其定义，$rootscope是您启动应用的基础范围。另一方面，$document代表整个javascript window.document。

然后，包含您的应用程序的DOM部分可能已准备就绪，但不是整个文档。

我应该注意到，在大多数网络应用程序（至少我看到的那些）上，$ rootscope都在body标签上，在这种情况下它实际上是相同的。

$ document.ready和$ rootScope。$ on（'$ viewContentLoaded'）有什么区别？

2 个答案: