Événement AngularJs à appeler après le chargement du contenu

J’ai une fonction que je veux appeler après le chargement du contenu de la page. J’ai lu à propos de $ viewContentLoaded et cela ne fonctionne pas pour moi. Je cherche quelque chose comme

document.addEventListener('DOMContentLoaded', function () { //Content goes here }, false); 

L’appel ci-dessus ne fonctionne pas pour moi dans le contrôleur AngularJs.

Selon la documentation de $ viewContentLoaded , il est supposé fonctionner

Emis chaque fois que le contenu ngView est rechargé.

$viewContentLoaded événement $viewContentLoaded est émis ce qui signifie que pour recevoir cet événement, vous avez besoin d’un contrôleur parent comme

 

De MainCtrl vous pouvez écouter l’événement

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

Vérifiez la démo

Angulaire <1.6.X

 angular.element(document).ready(function () { console.log('page loading completed'); }); 

Angulaire> = 1.6.X

 angular.element(function () { console.log('page loading completed'); }); 

fixé – 2015.06.09

Utilisez une directive et la méthode ready éléments angulars comme suit:

js

 .directive( 'elemReady', function( $parse ) { return { ressortingct: 'A', link: function( $scope, elem, attrs ) { elem.ready(function(){ $scope.$apply(function(){ var func = $parse(attrs.elemReady); func($scope); }) }) } } }) 

html

 

ou pour ceux qui utilisent la syntaxe du contrôleur comme

 

L’avantage de ceci est que vous pouvez être aussi large ou granulaire avec votre interface utilisateur que vous le souhaitez et que vous supprimez la logique DOM de vos contrôleurs. Je dirais que c’est la voie angular recommandée.

Vous devrez peut-être hiérarchiser cette directive si vous avez d’autres directives fonctionnant sur le même noeud.

Vous pouvez l’appeler directement en ajoutant {{YourFunction()}} après l’élément HTML.

Voici un Plunker Link .

J’ai dû implémenter cette logique en manipulant des graphiques google. ce que j’ai fait, c’est qu’à la fin de ma définition html dans le contrôleur, j’ai ajouté.

   -- some html here -- --and at the end or where ever you want -- 

et dans cette fonction, appelez simplement votre logique.

 $scope.FunCall = function () { alert("Called"); } 

Si vous obtenez une erreur $ digest déjà en cours, cela pourrait vous aider:

 return { ressortingct: 'A', link: function( $scope, elem, attrs ) { elem.ready(function(){ if(!$scope.$$phase) { $scope.$apply(function(){ var func = $parse(attrs.elemReady); func($scope); }) } else { var func = $parse(attrs.elemReady); func($scope); } }) } } 
 var myM = angular.module('data-module'); myM.directive('myDirect',['$document', function( $document ){ function link( scope , element , attrs ){ element.ready( function(){ } ); scope.$on( '$viewContentLoaded' , function(){ console.log(" ===> Called on View Load ") ; } ); } return { link: link }; }] ); 

La méthode ci-dessus a fonctionné pour moi

J’utilisais {{myFunction()}} dans le modèle mais j’ai trouvé un autre moyen d’utiliser $timeout dans le contrôleur. Je pensais que je le partagerais, ça marche bien pour moi.

 angular.module('myApp').controller('myCtrl', ['$timeout', function($timeout) { var self = this; self.controllerFunction = function () { alert('controller function');} $timeout(function () { var vanillaFunction = function () { alert('vanilla function'); }(); self.controllerFunction(); }); }]); 

En cours d’exécution après le chargement de la page devrait être partiellement satisfaite en définissant un écouteur d’événement à l’événement de chargement de fenêtre

 window.addEventListener("load",function()...) 

A l’intérieur du module.run(function()...) de angular, vous aurez tous access à la structure et aux dépendances du module.

Vous pouvez broadcast et emit événements pour les ponts de communication.

Par exemple:

  • module set onload event et logique de construction
  • module de diffusion d’événement aux contrôleurs lorsque la logique l’exige
  • Les contrôleurs écoutent et exécutent leur propre logique en fonction des processus de chargement des modules.

Si vous voulez que certains éléments soient complètement chargés, utilisez ng-init sur cet élément.

eg

la fonction initModalFacultyInfo () devrait exister dans le contrôleur.

J’ai trouvé que si vous avez des vues nestedes – $ viewContentLoaded est déclenché pour chacune des vues nestedes. J’ai créé cette solution pour trouver le $ viewContentLoaded final. Semble fonctionner correctement pour définir $ window.prerenderReady comme requirejs par Prerender (va dans .run () dans le app.js principal):

 // Trigger $window.prerenderReady once page is stable // Note that since we have nested views - $viewContentLoaded is fired multiple // times and we need to go around this problem var viewContentLoads = 0; var checkReady = function(previousContentLoads) { var currentContentLoads = Number(viewContentLoads) + 0; // Create a local copy of the number of loads if (previousContentLoads === currentContentLoads) { // Check if we are in a steady state $window.prerenderReady = true; // Raise the flag saying we are ready } else { if ($window.prerenderReady || currentContentLoads > 20) return; // Runaway check $timeout(function() {checkReady(currentContentLoads);}, 100); // Wait 100ms and recheck } }; $rootScope.$on('$stateChangeSuccess', function() { checkReady(-1); // Changed the state - ready to listen for end of render }); $rootScope.$on('$viewContentLoaded', function() { viewContentLoads ++; }); 
 var myTestApp = angular.module("myTestApp", []); myTestApp.controller("myTestController", function($scope, $window) { $window.onload = function() { alert("is called on page load."); }; }); 

J’utilise setInterval pour attendre le contenu chargé. J’espère que cela peut vous aider à résoudre ce problème.

 var $audio = $('#audio'); var src = $audio.attr('src'); var a; a = window.setInterval(function(){ src = $audio.attr('src'); if(src != undefined){ window.clearInterval(a); $('audio').mediaelementplayer({ audioWidth: '100%' }); } }, 0);