[解決済み] ビューのロード時にAngularJSの初期化コードを実行する

質問

ビューを読み込む際に、関連するコントローラでいくつかの初期化コードを実行したいと思います。

これを行うために、私はビューのメイン要素でng-initディレクティブを使用しました。

<div ng-init="init()">
  blah
</div>

で、コントローラの中に

$scope.init = function () {
    if ($routeParams.Id) {
        //get an existing object
        });
    } else {
       //create a new object
    }

    $scope.isSaving = false;
}

最初の質問：このやり方は正しいのでしょうか？

次に、私はイベントが行われるシーケンスに問題があります。ビューに「保存」ボタンがあり、これは ng-disabled ディレクティブをこのように使用します。

<button ng-click="save()" ng-disabled="isClean()">Save</button>

その isClean() 関数はコントローラで定義されています。

$scope.isClean = function () {
    return $scope.hasChanges() && !$scope.isSaving;
}

見ての通り、これは $scope.isSaving フラグで初期化された init() 関数で初期化されます。

問題：ビューがロードされるとき、isClean関数が呼び出されます。 の前に は init() 関数の前にあるため、フラグ isSaving は undefined . これを防ぐにはどうしたらいいのでしょうか？

どのように解決するのですか？

ビューがロードされると、それに関連するコントローラもロードされます。 このとき ng-init を使用する代わりに、単純に init() メソッドを呼び出すだけです。

$scope.init = function () {
    if ($routeParams.Id) {
        //get an existing object
    } else {
        //create a new object
    }
    $scope.isSaving = false;
}
...
$scope.init();

コントローラは ng-init の前に実行されるので、これは2番目の問題も解決します。

フィドル

として John David Five にも書いてありますが、これを $scope にアタッチしないほうがいいかもしれません。

var init = function () {
    // do something
}
...
init();

jsFiddleを見る

特定のデータがプリセットされるのを待ちたい場合、そのデータ要求を解決に移すか、そのコレクションまたはオブジェクトにウォッチャーを追加し、データがinit基準を満たしたときにinitメソッドを呼び出します。データの要件が満たされた時点でウォッチャーを削除し、ウォッチしているデータが変更されてinitメソッドを実行するための基準を満たした場合にinit関数がランダムに再実行されないようにします。

var init = function () {
    // do something
}
...
var unwatch = scope.$watch('myCollecitonOrObject', function(newVal, oldVal){
                    if( newVal && newVal.length > 0) {
                        unwatch();
                        init();
                    }
                });