У меня есть функция, которую я хочу вызвать после загрузки содержимого страницы. Я читал о $viewContentLoaded, и это не работает для меня. Я ищу что-то вроде
document.addEventListener('DOMContentLoaded', function () {
//Content goes here
}, false);
Выше вызов не работает для меня в контроллере AngularJs.
Согласно документации $ viewContentLoaded, он должен работать
Испускается каждый раз, когда содержимое ngView перезагружается.
Событие $viewContentLoaded генерируется, что означает, что для получения этого события вам нужен родительский контроллер, такой как
<div ng-controller="MainCtrl">
<div ng-view></div>
</div>
Из MainCtrl вы можете прослушать событие
$scope.$on('$viewContentLoaded', function(){
//Here your view content is fully loaded !!
});
Проверьте демо
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');
});
Используйте директиву и метод angular element ready следующим образом:
.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);
})
})
}
}
})
<div elem-ready="someMethod()"></div>
или для тех, кто использует синтаксис контроллера...
<div elem-ready="vm.someMethod()"></div>
Преимущество этого в том, что вы можете быть таким же широким или узким с вашим пользовательским интерфейсом, как вам нравится, и вы удаляете логику DOM с ваших контроллеров. Я бы сказал, что это рекомендуемый способ angular.
Вам может потребоваться определить приоритет этой директивы, если у вас есть другие директивы, работающие на одном и том же node.
Вы можете напрямую вызвать его, добавив {{YourFunction()}} после элемента HTML.
Вот Plunker Link.
Мне пришлось реализовать эту логику при работе с диаграммами Google. я сделал это в конце моего определения внутреннего контроллера html.
<body>
-- some html here --
--and at the end or where ever you want --
<div ng-init="FunCall()"></div>
</body>
и в этой функции просто вызовите вашу логику.
$scope.FunCall = function () {
alert("Called");
}
Вы можете вызвать версию события onload на javascript в формате js. это событие ng-load можно применить к любому элементу dom, например, div, span, body, iframe, img и т.д. Ниже приведена ссылка для добавления ng-load в существующий проект.
скачать ng-load для angular js
Ниже приведен пример для iframe: после загрузки testCallbackFunction будет вызываться в контроллере
Пример
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>
Если вы получаете ошибку $digest, которая уже выполняется, это может помочь:
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);
}
})
}
}
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
};
}] );
Выше метод работал у меня
Запуск после загрузки страницы должен быть частично удовлетворен установкой прослушивателя событий на событие загрузки окна
window.addEventListener("load",function()...)
Внутри module.run(function()...) от angular у вас будет весь доступ к структуре модуля и зависимостям.
Вы можете broadcast и emit события для мостов связи.
Например:
Я использовал {{myFunction()}} в шаблоне, но затем нашел другой способ здесь, используя $timeout внутри контроллера. Думал, что я поделюсь им, отлично работает для меня.
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();
});
}]);
Если вы хотите, чтобы определенный элемент полностью загрузился, используйте ng-init для этого элемента.
например. <div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"> ..</div>
в контроллере должна существовать функция initModalFacultyInfo().
Я обнаружил, что если у вас есть вложенные представления - $viewContentLoaded запускается для каждого из вложенных представлений. Я создал это обходное решение, чтобы найти окончательный $viewContentLoaded. Кажется, что все в порядке для установки $window.prerenderReady в соответствии с требованиями Prerender (идет в .run() в главном 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 ++;
});
var myTestApp = angular.module("myTestApp", []);
myTestApp.controller("myTestController", function($scope, $window) {
$window.onload = function() {
alert("is called on page load.");
};
});
Решение, которое работает для меня, заключается в следующем
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);
}
});
}
}
}
}
}]);
Код контроллера следующий
$scope.crearTooltip = function () {
$('[data-toggle="popover"]').popover();
}
HTML-код следующий
<tr ng-repeat="item in $data" on-finish-render="crearTooltip()">
Я использую setInterval, чтобы дождаться загрузки содержимого. Надеюсь, это поможет вам решить эту проблему.
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);