2017-01-11 4 views
0

Je travaille sur une application angulaire et j'ai un scénario dans lequel je veux me concentrer sur un champ de texte lors du chargement de la page. J'ai essayé l'autofocus HTML5 mais je dois trouver une solution alternative pour cela, car il y a un problème de compatibilité avec le navigateur.Différence entre ng-init et onload pour la fonction invoke [Angular JS]

Je prévois d'appeler une fonction sur le chargement de la page qui se concentrera sur le champ d'entrée que je voulais. I ont les fonctions suivantes avec angulaire ng-init et onload pour charger la fonction. Je ne suis pas sûr quelle méthode devrais-je suivre dans le contexte angulaire que je suis peu confus entre leur différence.

onload

<body onload="focusOnInput()"> 
     <form name="resetPasswordForm"> 
      <input name="NewPassword" type="password"/> 
     </form> 
    </body> 
    <script> 
     function focusOnInput() { 
      document.forms["resetPasswordForm"]["NewPassword"].focus(); 
     } 
    </script> 

angulaire ng-init

<body in-init="focusOnInput()"> 
     <form name="resetPasswordForm"> 
      <input name="NewPassword" type="password"/> 
     </form> 
     <script> 
      function focusOnInput() { 
      document.forms["resetPasswordForm"]["NewPassword"].focus(); 
      } 
     </script> 
    </body> 
+3

Possible duplication de [Différence entre onLoad et ng-init en angulaire] (http://stackoverflow.com/questions/18441775/difference-between-onload-and-ng-init-in-angular) – Sajeetharan

+0

Quelle est la différence entre init et charge sur le cycle de vie de la page? c'est la réponse –

Répondre

0

onload est pas dans votre contexte angulaire. La fonction onload est une fonction de rappel sur l'événement LOAD de DOM.

votre ng-init est dans un contexte angulaire. Vous devez utiliser ng-init angulaire.

La fonction ng-init comme indiqué dans votre code ne fonctionnera pas telle quelle. La fonction définie dans ng-int doit être dans le contexte angulaire. votre focusOnInput() n'est pas dans le contexte angulaire. C'est dans un contexte javascript.

si vous aimez-vous utiliser ng-init aurez besoin d'injecter fenêtre $ dans votre contrôleur et utiliser ensuite affecter focusOnInput à votre portée de $ et utiliser cette méthode en ng-init

quelque chose comme ça

angular.module().controller('TestController',['$scope','$window',function($scope,$window){ 

...... 

$scope.myNewFunction = $window.focusOnInput; 

...... 



}]) 

puis d'utiliser myNewFunction dans votre ng-init.