Событие AngularJs для вызова после загрузки контента

У меня есть функция, которую я хочу вызвать после загрузки содержимого страницы. Я прочитал о $ 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 !!
  });

Проверьте демо

Угловой <1.6.X

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

Угловой> = 1.6.X

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

фиксированный - 2015.06.09

Используйте директиву и метод углового элемента readyследующим образом:

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>

или для тех, кто использует контроллер-как синтаксис ...

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

Преимущество этого состоит в том, что вы можете использовать как можно более широкий или детальный пользовательский интерфейс и удалять логику DOM с контроллеров. Я бы сказал, что это рекомендуемый угловой путь.

Возможно, вам придется расставить приоритеты в этой директиве, если у вас есть другие директивы, работающие на том же узле.

Вы можете напрямую позвонить, добавив {{YourFunction()}} после HTML-элемента.

Вот такой Plunker Link.

Я должен был реализовать эту логику при работе с гугл чартами. то, что я сделал, было то, что в конце моего 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");
}

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

}] );

Выше метод работал на меня

Вы можете вызвать javascript-версию события onload в угловых js. это событие ng-load может быть применено к любому элементу dom, такому как div, span, body, iframe, img и т. д. Ниже приведена ссылка для добавления ng-load в существующий проект.

скачать ng-load для угловой 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);
                }

            })
        }
    }

Запуск после загрузки страницы должен быть частично удовлетворен путем установки прослушивателя события на событие загрузки окна

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