Comment exécuter la fonction de controller AngularJS lors du chargement d'une page?

essayez ça?

$scope.$on('$viewContentLoaded', function() {
    //call it here
});

Je ne pourrais jamais obtenir $viewContentLoaded pour travailler pour moi, et ng-init devrait vraiment être utilisé dans un ng-repeat (selon la documentation), et appeler une fonction directement dans un contrôleur peut causer des erreurs si le code repose sur un élément qui n'a pas encore été défini.

C'est ce que je fais et cela fonctionne pour moi:

$scope.$on('$routeChangeSuccess', function () {
  // do something
});

sauf si vous utilisez ui-router . Alors c'est:

$scope.$on('$stateChangeSuccess', function () {
  // do something
});

angular.element(document).ready(function () {

    // your code here

});

Dimitri / Mark ne fonctionnait pas pour moi mais l'utilisation de la fonction $timeout semble bien fonctionner pour s'assurer que votre code ne s'exécute qu'après que le markup est rendu.

# Your controller, including $timeout

var $scope.init = function(){
 //your code
}

$timeout($scope.init)

J'espère que ça aidera.

vous pouvez le faire si vous voulez regarder l'objet DOM chargé par ViewContent pour changer et ensuite faire quelque chose. à l'aide de $champ d'application.$on fonctionne aussi mais différemment surtout quand vous avez un mode de page sur votre routage.

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

vous pouvez utiliser l'objet $window d'angular:

$window.onload = function(e) {
  //your magic here
}

une autre alternative:

var myInit = function () {
    //...
};
angular.element(document).ready(myInit);

(via https://stackoverflow.com/a/30258904/148412 )

encore une autre alternative si vous avez un controller spécifique à cette page:

(function(){
    //code to run
}());

lorsque vous utilisez $routeProvider vous pouvez résoudre sur .state et bootstrap votre service. C'est à dire, vous allez charger le contrôleur et la vue, seulement après résoudre votre Service:

ui-routes

 .state('nn', {
        url: "/nn",
        templateUrl: "views/home/n.html",
        controller: 'nnCtrl',
        resolve: {
          initialised: function (ourBootstrapService, $q) {

            var deferred = $q.defer();

            ourBootstrapService.init().then(function(initialised) {
              deferred.resolve(initialised);
            });
            return deferred.promise;
          }
        }
      })

Service

function ourBootstrapService() {

 function init(){ 
    // this is what we need
 }
}

trouvé Dmitry réponse Evseev très utile.

Cas 1: utilisation d'angularJs uniquement:

pour exécuter une méthode sur la charge de page, vous pouvez utiliser ng-init dans la vue et déclarer la méthode init dans le contrôleur, ayant dit que l'utilisation de la fonction plus lourde n'est pas recommandée, comme selon le documents angulaires sur ng-init :

cette directive peut être utilisée à mauvais escient pour ajouter les montants de logique dans vos modèles. Il n'y a que quelques utilisations appropriées de ngInit, comme pour l'Alias des propriétés spéciales de ngRepeat, comme vu dans la démo ci-dessous; et pour l'injection de données via le script côté serveur. En plus de ces quelques cas, vous devriez utiliser des controllers plutôt que ngInit pour initialiser les valeurs sur un scope.

HTML:

<div ng-controller="searchController()">
    <!-- renaming view code here, including the search box and the buttons -->
</div>

contrôleur:

app.controller('SearchCtrl', function(){

    var doSearch = function(keyword){
        //Search code here
    }

    doSearch($routeParams.searchKeyword);
})

avertissement: N'utilisez pas ce contrôleur pour une autre vue destinée à une intention différente car il provoquera la méthode de recherche être exécutée là aussi.

Cas 2 : Utilisation Ionique:

le code ci-dessus fonctionnera, assurez-vous juste que le cache de vue est désactivé dans le route.js comme:

route.js

.state('app', {
    url           : '/search',
    cache         : false, //disable caching of the view here
    templateUrl   : 'templates/search.html'   ,
    controller    : 'SearchCtrl'
  })

Espérons que cette aide

j'ai eu le même problème et seule cette solution a fonctionné pour moi (elle exécute une fonction après qu'un DOM complet a été chargé). Je l'utilise pour faire défiler l'ancre après que la page a été chargée:

angular.element(window.document.body).ready(function () {

                        // Your function that runs after all DOM is loaded

                    });

vous pouvez enregistrer les résultats de la recherche dans un service commun qui peut utiliser de n'importe où et ne se dégage pas lors de naviguer vers une autre page, puis vous pouvez définir les résultats de la recherche avec les données enregistrées pour le clic de Retour bouton

function search(searchTerm) {
    // retrieve the data here;
    RetrievedData = CallService();
    CommonFunctionalityService.saveSerachResults(RetrievedData);
} 

pour votre backbutton

function Backbutton() {
    RetrievedData = CommonFunctionalityService.retrieveResults();
}