Comment exécuter la fonction de contrôleur AngularJS au chargement de la page?

Actuellement, j'ai une page Angular.js qui permet de rechercher et d'afficher les résultats. L'utilisateur clique sur un résultat de recherche, puis clique sur le bouton de retour. Je souhaite que les résultats de la recherche s'affichent à nouveau, mais je n'arrive pas à déterminer comment déclencher l'exécution de la recherche. Voici le détail:

• Ma page Angular.js est une page de recherche, avec un champ de recherche et un bouton de recherche. L'utilisateur peut saisir manuellement une requête et appuyer sur un bouton. La requête ajax est déclenchée et les résultats sont affichés. Je mets à jour l'URL avec le terme de recherche. Tout fonctionne bien.
• L'utilisateur clique sur un résultat de la recherche et est redirigé vers une autre page - cela fonctionne également très bien.
• L'utilisateur clique sur le bouton Précédent et retourne à ma page de recherche angulaire, et l'URL correcte s'affiche, y compris le terme de recherche. Tout fonctionne bien.
• J'ai lié la valeur du champ de recherche au terme de recherche dans l'URL, il contient donc le terme de recherche attendu. Tout fonctionne bien.

Comment puis-je exécuter à nouveau la fonction de recherche sans que l'utilisateur n'ait à appuyer sur le "bouton de recherche"? Si c'était jquery, j'exécuterais une fonction dans la fonction documentready. Je ne peux pas voir l'équivalent Angular.js.

D'une part, comme @ Mark-Rajcok l'a dit, vous pouvez simplement vous en sortir avec une fonction intérieure privée:

// at the bottom of your controller
var init = function () {
   // check if there is query in url
   // and fire search in case its value is not empty
};
// and fire it after definition
init();

Vous pouvez également consulter la directive ng-init . La mise en œuvre ressemblera beaucoup à:

// 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
};

Mais attention à cela car la documentation angulaire implique (depuis la v1.2) de ne PAS l'utiliser ng-initpour cela. Cependant, cela dépend de l'architecture de votre application.

J'ai utilisé ng-initlorsque je voulais transmettre une valeur du back-end à l'application angulaire:

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>

Essaye ça?

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

Je ne pourrais jamais me mettre $viewContentLoadedau travail et ng-initne devrait vraiment être utilisé que dans un ng-repeat(selon la documentation), et aussi appeler une fonction directement dans un contrôleur peut provoquer 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 ça 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

});

La solution de Dimitri / Mark n'a pas fonctionné pour moi, mais l'utilisation de la fonction $ timeout semble bien fonctionner pour garantir que votre code ne s'exécute qu'une fois le balisage rendu.

# Your controller, including $timeout

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

$timeout($scope.init)

J'espère que cela aide.

Vous pouvez le faire si vous souhaitez voir l'objet DOM viewContentLoaded changer et faire quelque chose. l'utilisation de $ scope. $ on fonctionne aussi mais différemment, surtout lorsque vous avez un mode de page sur votre routage.

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

Vous pouvez utiliser l'objet $ window angulaire:

$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 contrôleur spécifique à cette page:

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

Lorsque vous utilisez $ routeProvider, vous pouvez résoudre sur .state et démarrer votre service. C'est-à-dire que vous allez charger Controller et View, seulement après avoir résolu 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;
          }
        }
      })

Un service

function ourBootstrapService() {

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

Dmitry Evseev a trouvé la réponse assez utile.

Cas 1: Utiliser angularJs seul:
Pour exécuter une méthode au chargement de la page, vous pouvez utiliser ng-initdans la vue et déclarer la méthode init dans le contrôleur, ayant dit que l'utilisation d'une fonction plus lourde n'est pas recommandée, selon les documents angulaires sur ng-init :

Cette directive peut être utilisée abusivement pour ajouter des quantités inutiles de logique dans vos modèles. Il n'y a que quelques utilisations appropriées de ngInit, comme pour aliaser des propriétés spéciales de ngRepeat, comme on le voit dans la démo ci-dessous; et pour injecter des données via des scripts côté serveur. Outre ces quelques cas, vous devez utiliser des contrôleurs plutôt que ngInit pour initialiser des valeurs sur une étendue.

HTML:

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

Manette:

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 cela entraînerait également l'exécution de la méthode de recherche.

Cas 2: Utilisation d'Ionic:
Le code ci-dessus fonctionnera, assurez-vous simplement que le cache de vue est désactivé dans le route.js:

route.js

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

J'espère que cela t'aides

J'ai eu le même problème et seule cette solution a fonctionné pour moi (elle exécute une fonction après le chargement d'un DOM complet). J'utilise ceci pour faire défiler pour ancrer une fois la page 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 être utilisé de n'importe où et ne s'efface pas lorsque vous accédez à une autre page, puis vous pouvez définir les résultats de la recherche avec les données enregistrées pour le clic du bouton Retour

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

Pour votre backbutton

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

appeler les méthodes initiales dans la fonction self initialize.

(function initController() {

    // do your initialize here

})();