javascript - ドキュメントの準備ができたときにAngularJSコントローラーで関数を実行する方法は?

Question

angularコントローラー内に関数があります。この関数をドキュメントの準備ができたときに実行したいのですが、domが作成されるとangularが実行することに気付きました。

 function myController($scope)
 {
     $scope.init = function()
     {
        // I'd like to run this on document ready
     }

     $scope.init(); // doesn't work, loads my init before the page has completely loaded
 }

どうすればこれを実行できるか知っている人はいますか？

Answer 1

メソッドを使用してangular.element(document).ready()、ドキュメントの準備ができたときのコールバックをアタッチできます。次のように、コントローラーにコールバックを簡単にアタッチできます。

angular.module('MyApp', [])

.controller('MyCtrl', [function() {
    angular.element(document).ready(function () {
        document.getElementById('msg').innerHTML = 'Hello';
    });
}]);

http://jsfiddle.net/jgentes/stwyvq38/1/

Answer 2

Angularは、DOMContentLoadedイベント時に、または angular.js スクリプトが評価されたときに (その時点で document.readyState が「complete」に設定されている場合)、自動的に初期化されます。この時点で、Angular はアプリケーション ルートを指定する ng-app ディレクティブを探します。

https://docs.angularjs.org/guide/bootstrap

これは、DOM の準備が整った後にコントローラー コードが実行されることを意味します。

したがって、それはただ$scope.init()です。

Answer 3

これは、coffeescript を使用した外部コントローラー内での試みです。それはかなりうまく機能します。settings.screen.xs|sm|md|lg は、アプリに含まれる非改ざんファイルで定義された静的な値であることに注意してください。値は、名前を冠したメディア クエリ サイズの Bootstrap 3 公式ブレークポイントごとです。

xs = settings.screen.xs // 480
sm = settings.screen.sm // 768
md = settings.screen.md // 992
lg = settings.screen.lg // 1200

doMediaQuery = () ->

    w = angular.element($window).width()

    $scope.xs = w < sm
    $scope.sm = w >= sm and w < md
    $scope.md = w >= md and w < lg
    $scope.lg = w >= lg
    $scope.media =  if $scope.xs 
                        "xs" 
                    else if $scope.sm
                        "sm"
                    else if $scope.md 
                        "md"
                    else 
                        "lg"

$document.ready () -> doMediaQuery()
angular.element($window).bind 'resize', () -> doMediaQuery()

Answer 4

$scope.$on('$ViewData', function(event) {
//Your code.
});