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

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模塊的一部分 。 只要重新加載ng-view元素的內容，它就會由ngView發出。 事件是角度感知的，這意味着它會導致摘要周期，並且由於觀看此事件而執行的任何代碼都將影響內容視圖。 此外，每次加載新路徑時都會發出此事件，這與$document.ready() ，后者僅發出一次。

通常，如果您的目標是在app start初始化變量，那么在控制器中初始化變量是安全的選擇。 如果您的目標是在每次呈現新視圖時初始化變量，通常也可以在控制器中為每個視圖完成，但$viewContentLoaded是一個合理的回退。 $document.ready()幾乎不應該與Angular應用程序一起使用，因為它不是Angular感知功能。

Answer 2

如果您要查看他們的定義， $ rootscope就是您啟動應用程序的基礎范圍。 另一方面， $ document代表整個javascript window.document 。

然后，包含您的應用程序的DOM部分可能已准備就緒，但不是整個文檔。

我應該注意到，在大多數網絡應用程序（至少我看到的那些）上，$ rootscope是在body標簽上，在這種情況下，它實際上是相同的。