web-dev-qa-db-fra.com

Fonction d'appel angulaire sur la page

J'apprends AngularJS. J'ai une étiquette d'article et en cliquant sur un bouton, chaque page d'article est affichée sans aucun rafraîchissement de page. C'est un site web d'une page. Ce que je veux, c'est que lorsque l'identifiant de l'article "showSelector" est chargé, je souhaite appeler myFunction() et, dans cette fonction, afficher une alerte. Mais l'alerte ne s'affiche pas. 

Comment puis je faire ça? 

 <article id="showSelector" class="panel" ng-controller="CinemaCtrl" onload="myFunction()">
      <header>
        <a ng-click="back()" class="icon fa-arrow-circle-left"></a><h2>Shows in {{getSelectedCinema()}}</h2>        
      </header>
      <p>
        These shows are played in our single room theatre. Select one to reserce a ticket for it.
      </p>
      <section>
        <div class="row">
          <div class="4u" ng-repeat="show in shows">
            <div class="movieCard">
              <a ng-click="selectShow(show)"></a>
              <h3>{{show.nameOfShow}}</h3>
              <h4>{{show.timeOfShow | date:'MMM d'}}</h4>
              <h4>{{show.timeOfShow | date:'HH:mm'}}</h4>
              <p>Free seats: {{show.reservations | freeSeatFilter}}</p>
            </div>
          </div>
        </div>
      </section>
      <script>
function myFunction() {
    alert("Page is loaded");
};
</script>
    </article>
javascriptjqueryangularjs
2
asdfkjasdfjk

Vous devez appeler cette fonction à partir du contrôleur.

angular.module('App', [])
  .controller('CinemaCtrl', ['$scope', function($scope) {
    myFunction();
  }]);

Même avec du javascript/html normal, votre fonction ne fonctionnera pas au chargement de la page, car vous ne définissez que la fonction, vous ne l'appelez jamais. Cela n’a vraiment rien à voir avec angular, mais puisque vous utilisez angular, c’est la "méthode angulaire" qui permet d’invoquer la fonction.

Évidemment, mieux vaut toujours déclarer la fonction dans le contrôleur aussi.

Edit: En fait, je vois votre "onload" - qui ne sera pas appelé car angular injecte le code HTML dans le DOM. Le code HTML n'est jamais "chargé" (ou la page n'est chargée qu'une fois).

13
James Gaunt

Au lieu d'utiliser onload, utilisez le ng-init d'Angular.

<article id="showSelector" ng-controller="CinemaCtrl" ng-init="myFunction()">

Remarque: Cela nécessite que myFunction soit une propriété de la portée CinemaCtrl.

11
Scott McDermid
<section ng-controller="testController as ctrl" class="test_cls"  data-ng-init="fn_load()">

$scope.fn_load = function () {
  console.log("page load")
};
3
Jijo Paulose

Ce n'est pas la manière angulaire, supprimez la fonction du corps html et utilisez-la dans le contrôleur, ou utilisez 

angular.element(document).ready

Plus de détails sont disponibles ici: https://stackoverflow.com/a/18646795/4301583

2
Антон Брагин

vous pouvez également utiliser le code ci-dessous.

function activateController(){
     console.log('HELLO WORLD');
}

$scope.$on('$viewContentLoaded', function ($evt, data) {
    activateController();
});
0
RaviMittal

vous pouvez l'utiliser directement avec l'instance $ scope

     $scope.init=function()
        {
            console.log("entered");
            data={};
            /*do whatever you want such as initialising scope variable,
              using $http instance etcc..*/
        }
       //simple call init function on controller
       $scope.init();
0
Manzoor Samad