Lorsque je charge une vue, j'aimerais exécuter du code d'initialisation dans son contrôleur associé.

Pour ce faire, j'ai utilisé la directive ng-init sur l'élément principal de ma vue:

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

et dans le contrôleur:

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

    $scope.isSaving = false;
}

Première question: est-ce la bonne façon de procéder?

Ensuite, j'ai un problème avec la séquence des événements. Dans la vue, j'ai un bouton `` enregistrer '', qui utilise la ng-disableddirective en tant que telle:

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

la isClean()fonction est définie dans le contrôleur:

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

Comme vous pouvez le voir, il utilise l' $scope.isSavingindicateur, qui a été initialisé dans la init()fonction.

PROBLEME: lorsque la vue est chargé, la fonction isClean est appelée avant la init()fonction, d' où le drapeau isSavingest undefined. Que puis-je faire pour éviter cela?

Lorsque votre vue se charge, son contrôleur associé fait de même. Au lieu d'utiliser ng-init, appelez simplement votre init()méthode dans votre contrôleur:

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

Étant donné que votre contrôleur s'exécute avant ng-init, cela résout également votre deuxième problème.

Violon

Comme John David Fivementionné, vous ne souhaiterez peut-être pas l'attacher $scopepour rendre cette méthode privée.

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

Voir jsFiddle

Si vous souhaitez attendre que certaines données soient prédéfinies, déplacez cette demande de données vers une résolution ou ajoutez un observateur à cette collection ou à cet objet et appelez votre méthode init lorsque vos données répondent à vos critères d'initialisation. Je supprime généralement l'observateur une fois que mes exigences en matière de données sont satisfaites, de sorte que la fonction init ne se réexécute pas au hasard si les données que vous regardez changent et répondent à vos critères pour exécuter votre méthode init.

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

Depuis AngularJS 1.5, nous devrions utiliser$onInit ce qui est disponible sur n'importe quel composant AngularJS. Tiré de la documentation sur le cycle de vie des composants depuis la v1.5, c'est la méthode préférée:

$ onInit () - Appelé sur chaque contrôleur une fois que tous les contrôleurs d'un élément ont été construits et leurs liaisons initialisées (et avant les fonctions de pré et post-liaison pour les directives sur cet élément). C'est un bon endroit pour mettre le code d'initialisation de votre contrôleur.

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {

    //default state
    $scope.name = '';

    //all your init controller goodness in here
    this.$onInit = function () {
      $scope.name = 'Superhero';
    }
});

>> Démo Fiddle

Un exemple avancé d'utilisation du cycle de vie des composants:

Le cycle de vie des composants nous donne la possibilité de gérer correctement les composants. Cela nous permet de créer des événements pour par exemple "init", "change" ou "destroy" d'un composant. De cette façon, nous sommes en mesure de gérer des éléments qui dépendent du cycle de vie d'un composant. Ce petit exemple montre comment enregistrer et désinscrire un $rootScopeécouteur d'événement $on. En sachant, qu'un événement $onbinded sur $rootScopene sera pas undinded lorsque le contrôleur perd sa référence dans la vue ou se détruit , nous devons détruire un $rootScope.$onauditeur manuellement. Un bon endroit pour mettre ces choses est $onDestroyla fonction de cycle de vie d'un composant:

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $rootScope) {

  var registerScope = null;

  this.$onInit = function () {
    //register rootScope event
    registerScope = $rootScope.$on('someEvent', function(event) {
        console.log("fired");
    });
  }

  this.$onDestroy = function () {
    //unregister rootScope event by calling the return function
    registerScope();
  }
});

>> Démo Fiddle

Ou vous pouvez simplement initialiser en ligne dans le contrôleur. Si vous utilisez une fonction init interne au contrôleur, elle n'a pas besoin d'être définie dans la portée. En fait, il peut être auto-exécutable:

function MyCtrl($scope) {
    $scope.isSaving = false;

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

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

    $scope.hasChanges = function() { return false }
}

J'utilise le modèle suivant dans mes projets:

angular.module("AppName.moduleName", [])

/**
 * @ngdoc controller
 * @name  AppName.moduleName:ControllerNameController
 * @description Describe what the controller is responsible for.
 **/
    .controller("ControllerNameController", function (dependencies) {

        /* type */ $scope.modelName = null;
        /* type */ $scope.modelName.modelProperty1 = null;
        /* type */ $scope.modelName.modelPropertyX = null;

        /* type */ var privateVariable1 = null;
        /* type */ var privateVariableX = null;

        (function init() {
            // load data, init scope, etc.
        })();

        $scope.modelName.publicFunction1 = function () /* -> type  */ {
            // ...
        };

        $scope.modelName.publicFunctionX = function () /* -> type  */ {
            // ...
        };

        function privateFunction1() /* -> type  */ {
            // ...
        }

        function privateFunctionX() /* -> type  */ {
            // ...
        }

    });