ドキュメント上の角度コントローラの機能を実行するには？

Question

私は角度コントローラ内に機能を持っていますが、この機能をドキュメント上で実行してもらいたいと思いますが、domが作成されると角度が動くことに気付きました。

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

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

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

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

したがって、それはちょうど$scope.init()です。

Answer 3

は、高速検索のために、このポストHow to execute angular controller function on page load?
を参照してください：

// register controller in html 
<div data-ng-controller="myCtrl" data-ng-init="init()"></div> 

// in controller 
$scope.init = function() { 
    // check if there is query in url 
    // and fire search in case its value is not empty 
}; 

この方法は、あなたは、ドキュメントの準備ができるまで待つ必要はありません。

Answer 4

ここで私の試みは、coffeescriptを使用して外部コントローラの中です。それはむしろうまくいく。 settings.screen.xs | sm | md | lgは、アプリケーションに含める非uglifiedファイルで定義された静的な値です。値は同名のメディアクエリーのサイズのためにブートストラップ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 5

私はビューは、特定のサードパーティ製のコンポーネントの後にもロードされた後、私は、コントローラの機能を実行するために必要な似たような状況がありましたビュー内で初期化され、$ scope上に自身への参照が置かれていました。私のために働いていたのは、このスコープ・プロパティーのウォッチをセットアップし、初期化した後にのみ関数を起動することでした。

// $scope.myGrid property will be created by the grid itself 
// The grid will have a loadedRows property once initialized 

$scope.$watch('myGrid', function(newValue, oldValue) { 
    if (newValue && newValue.loadedRows && !oldValue) { 
     initializeAllTheGridThings(); 
    } 
}); 

ウォッチャーは、未定義の値で2回呼び出されます。グリッドが作成され、期待されるプロパティがある場合、初期化関数が安全に呼び出されることがあります。ウォッチャーが未定義のnewValueで最初に呼び出されたときも、oldValueは未定義です。

Answer 6

角度には、機能の実行を開始するための複数のタイムポイントがあります。あなたはjQueryの

$(document).ready(); 

のようなものを求めるならばあなたは非常に有用であるとの角度で、このアナログを見つけることがあります。

$scope.$watch('$viewContentLoaded', function(){ 
    //do something 
}); 

あなたはDOM要素を操作したいときに、この1は便利です。すべての要素がロードされた後にのみ実行を開始します。

UPD：上記の内容は、CSSのプロパティを変更する場合に有効です。しかし、時にはあなたはこれを試してみたいことがあります。この場合など、幅、高さ、などの要素のプロパティを、測定したいとき、それは動作しません。

$scope.$watch('$viewContentLoaded', 
    function() { 
     $timeout(function() { 
      //do something 
     },0);  
}); 

Answer 7

角度ドキュメントが言及するものとしようとしないのはなぜhttps://docs.angularjs.org/api/ng/function/angular.element。

angular.element（コールバック）

私は$のOnInit（）{...}関数内でこれを使用しました。

var self = this; 

angular.element(function() { 
     var target = document.getElementsByClassName('unitSortingModule'); 
     target[0].addEventListener("touchstart", self.touchHandler, false); 
     ... 
    }); 

これは私に役立ちました。

Answer 8

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