web-dev-qa-db-fra.com

Angular: ng-init ne fonctionne pas à la charge

J'ai vu quelques exemples sur le débordement de pile à propos de ce problème ng-init, bien que je ne puisse pas en trouver un qui le fasse référence avec l'utilisation d'un contrôleur.

J'ai appelé la fonction dans le contrôleur en ayant ce qui suit dans le fichier html

<div class="tab-container" ng-controller = "ExampleController" ng-init = "init()" >

Dans le contrôleur:

$scope.init = function(){

        alert("do something");
};

Il s'exécute, mais il s'exécute avant que les composants ne soient chargés à l'écran.

Suis-je en train de manquer quelque chose?

Merci

angularjscontrollerangularjs-ng-init
12
Anton Hughes

ng-init est censé fonctionner comme ceci, car il est utilisé pour initialiser les données.

Un exemple très simple:

<ul ng-init="list = [1,2,3,4]">
  <li ng-repeat="l in list"></li>
</ul>

Si vous essayez d'exécuter quelque chose pendant le chargement de votre contrôleur, c'est en fait beaucoup plus simple que vous ne le pensiez:

app.controller('mainCtrl', function ($scope) {

  var init = function ($scope) {
    // do whatever you need to do to initialize your controller
    $scope.someData = ["Hey", "I'm", "Alive"]
    $scope.otherData = localStorage.getItem('myBackup')
  }

  init()

})

Ou encore plus simple, si vous n'avez pas besoin de la fonction (pas de fermetures ou autre)

app.controller('mainCtrl', function ($scope) {

  // do whatever you need to do to initialize your controller
  $scope.someData = ["Hey", "I'm", "Alive"]
  $scope.otherData = localStorage.getItem('myBackup')

})

Edit - en supposant que vous utilisez ngView:
Pour exécuter le code lorsque la page est entièrement chargée, vous devez définir un observateur sur l'événement $viewContentLoaded, comme ça:

  $scope.$on('$viewContentLoaded', function(){
    //Here your view content is fully loaded !!
  });

app.controller('mainCtrl', function ($scope) {

  // This event is triggered when the view has finished loading
  $scope.$on('$viewContentLoaded', function() {

    $scope.someData = ["Hey", "I'm", "Alive"]
    $scope.otherData = localStorage.getItem('myBackup')      

  })    
})
15
domokun

une autre option utilise jquery. Cela conviendrait si vous dépendez de nombreux éléments. Mais assurez-vous de charger jquery avec une version de votre choix à projeter. chargement de jquery (insérer la version là où c'est ...):

<script src="https://code.jquery.com/jquery-..."></script>

le code js:

$(document).ready(function() { 
        alert("do something");
    });
0
haiatn