it-swarm.com.de

AngularJs-Ereignis, das nach dem Laden von Inhalt aufgerufen wird

Ich habe eine Funktion, die ich nach dem Laden von Seiteninhalten aufrufen möchte. Ich habe über $ viewContentLoaded gelesen und es funktioniert nicht für mich. Ich suche so etwas 

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

Der oben genannte Anruf funktioniert bei AngularJs Controller nicht.

145
user3233772

Laut Dokumentation von $ viewContentLoaded sollte es funktionieren

Wird jedes Mal gesendet, wenn der ngView-Inhalt neu geladen wird.

Es wird ein $viewContentLoaded-Ereignis ausgegeben, das heißt, um dieses Ereignis zu erhalten, benötigen Sie einen übergeordneten Controller

<div ng-controller="MainCtrl">
  <div ng-view></div>
</div>

Über MainCtrl können Sie das Ereignis anhören

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

Überprüfen Sie die Demo

155
Reza

Angular <1.6.X

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

Angular> = 1.6.X

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

fest - 2015.06.09

Verwenden Sie eine Direktive und die Winkelelementmethode ready wie folgt:

js

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

html

<div elem-ready="someMethod()"></div>

oder für diejenigen, die controller-as -Syntax verwenden ...

<div elem-ready="vm.someMethod()"></div>

Der Vorteil davon ist, dass Sie mit Ihrer Benutzeroberfläche so breit oder detailliert sein können, wie Sie möchten, und die DOM-Logik von Ihren Controllern entfernen. Ich würde argumentieren, dass dies der empfohlene Angular Weg ist.

Möglicherweise müssen Sie diese Direktive priorisieren, wenn andere Anweisungen auf demselben Knoten ausgeführt werden.

71
jusopi

Sie können es direkt aufrufen, indem Sie nach dem HTML-Element {{YourFunction()}} hinzufügen.

Hier ist ein Plunker Link .

55
blue

Diese Logik musste ich im Umgang mit Google-Diagrammen implementieren. Was ich getan habe, war, dass ich am Ende meiner HTML-Controller-Definition hinzugefügt habe.

  <body>
         -- some html here -- 
--and at the end or where ever you want --
          <div ng-init="FunCall()"></div>
    </body>

und in dieser Funktion rufen Sie einfach Ihre Logik auf.

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

sie können Javascript-Version des Onload-Ereignisses in eckigen js aufrufen. Dieses ng-load-Ereignis kann auf jedes dom-Element wie div, span, body, iframe, img usw. angewendet werden. Über den folgenden Link können Sie Ihrem vorhandenen Projekt ng-load hinzufügen.

download ng-load für eckige js

Das folgende Beispiel für iframe zeigt, dass nach dem Laden testCallbackFunction im Controller aufgerufen wird

BEISPIEL

JS

    // include the `ngLoad` module
    var app = angular.module('myApp', ['ngLoad']);
    app.controller('myCtrl', function($scope) {
        $scope.testCallbackFunction = function() {
          //TODO : Things to do once Element is loaded
        };

    });  

HTML

  <div ng-app='myApp' ng-controller='myCtrl'> 
      <iframe src="test.html" ng-load callback="testCallbackFunction()">  
  </div>
3
Darshan Jain

Wenn Sie bereits einen Fehler in $ Digest erhalten, kann dies helfen:

return {
        restrict: '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);
                }

            })
        }
    }
2
John Smith
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
    };

}] );

Obige Methode hat für mich funktioniert

2
Alok D

Wenn Sie möchten, dass ein bestimmtes Element vollständig geladen wird, verwenden Sie ng-init für dieses Element.

z.B. <div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"> ..</div>

die Funktion initModalFacultyInfo () sollte im Controller vorhanden sein.

0
NetDeveloper
var myTestApp = angular.module("myTestApp", []); 
myTestApp.controller("myTestController", function($scope, $window) {
$window.onload = function() {
 alert("is called on page load.");
};
});
0
Shreyansh Kumar

Ich habe {{myFunction()}} in der Vorlage verwendet, aber dann einen anderen Weg gefunden here mit $timeout im Controller. Ich dachte, ich würde es teilen, funktioniert für mich großartig.

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();
});

}]);
0
Nhan

Ich habe festgestellt, dass bei verschachtelten Ansichten $ viewContentLoaded für jede der verschachtelten Ansichten ausgelöst wird. Ich habe diese Problemumgehung erstellt, um den endgültigen $ viewContentLoaded zu finden. Scheint in Ordnung zu funktionieren, wenn $ window.prerenderReady von Prerender festgelegt wird (geht in .run () in der Haupt-app.js):

// 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 ++;
});
0
Maksym

Das Ausführen nach dem Laden der Seite sollte teilweise erfüllt werden, indem ein Ereignislistener auf das Fensterladeereignis festgelegt wird

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

Innerhalb der module.run(function()...) von angle haben Sie Zugriff auf die Modulstruktur und Abhängigkeiten.

Sie können broadcast- und emit-Ereignisse für Kommunikationsbrücken verwenden. 

Zum Beispiel:

  • onload-Ereignis und Build-Logik für das Modul
  • modul-Broadcast-Ereignis an Controller, wenn es die Logik erfordert
  • die Controller hören zu und führen ihre eigene Logik basierend auf Onload-Prozessen des Moduls aus.

Die Lösung, die für mich funktioniert, ist folgende

app.directive('onFinishRender', ['$timeout', '$parse', function ($timeout, $parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                    if (!!attr.onFinishRender) {
                        $parse(attr.onFinishRender)(scope);
                    }
                });
            }

            if (!!attr.onStartRender) {
                if (scope.$first === true) {
                    $timeout(function () {
                        scope.$emit('ngRepeatStarted');
                        if (!!attr.onStartRender) {
                            $parse(attr.onStartRender)(scope);
                        }
                    });
                }
            }
        }
    }
}]);

Controller-Code lautet wie folgt

$scope.crearTooltip = function () {
     $('[data-toggle="popover"]').popover();
}

HTML-Code lautet wie folgt

<tr ng-repeat="item in $data" on-finish-render="crearTooltip()">
0