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

164

У меня есть функция, которую я хочу вызвать после загрузки содержимого страницы. Я прочитал о $ viewContentLoaded, и он не работает для меня. Я ищу что-то вроде

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

Вышеупомянутый вызов не работает для меня в контроллере AngularJs.

angularjs events loaded user3233772
источник

1

Это хорошо работает stackoverflow.com/q/14968690/6521116

Крис Руф

164

Согласно документации $ viewContentLoaded , он должен работать

Испускается каждый раз, когда содержимое ngView перезагружается.

$viewContentLoaded событие генерируется, что означает, что для получения этого события вам нужен родительский контроллер, такой как

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

От MainCtrlвас можно прослушать событие

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

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

Тасним Реза
источник

59

Проблема с этим подходом состоит в том, что на этом этапе контроллеры не полностью инициализированы.

Эш Блю

12

@Reza Он прав, это событие вызывается при добавлении dom, но до того, как angular завершил обработку dom. Вы можете проверить это, добавив id или класс в качестве угловой переменной и попытаться найти его в $ viewContentLoaded с помощью jQuery. Вы не найдете это.

Томас Кекейсен

1

@Reza да, Томас прав, элемент формы не может получить доступ внутри, скажем, $ viewContentLoaded, $ scope.formName.elementName. $ SetValidity ("validateRule", false); будет выдавать «Ошибка типа: невозможно прочитать свойство 'elementName' из неопределенного"

Mussammil

2

То же самое можно вызвать на уровне $ rootScope. Вместо $ scope. $ On это должен быть $ rootScope. $ On и внутри блока app.run ()

Виль

4

Эта опция не будет работать, если у вас есть ng-repeatи несколько вложенных директив, которые будут генерировать HTML / контент на основе сложных циклов и условий. Рендеринг продолжается некоторое время, даже после $viewContentLoadedзапуска события. Как вы можете убедиться, что все элементы были полностью отрисованы, а затем выполнить определенный код? Есть отзывы?

tarekahf

104

Угловой <1.6.X

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

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

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

hariszaman
источник

Это входит в app.js?

zcoon

3

вы можете послушать его в вашем controllers.js

hariszaman

2

Работает нормально в основном файле app.js.

Лубот

Этот ответ работает для меня! Просто посмотрите, что на странице элемента документации 'ready () (устарело, используйте angular.element (callback) вместо angular.element (document) .ready (callback))'

Lovera

Это сработало для меня. Подход принятого ответа не работает внутри контроллера.

Фабиано

76

фиксированный - 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 с контроллеров. Я бы сказал, что это рекомендуемый угловой путь.

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

jusopi
источник

это похоже на действительно хорошее решение, но я не мог заставить его работать. Он задохнулся от elem.ready( $scope.$apply( readyFunc( $scope ))); любых идей, почему это может быть? Возможно, обновление для angular произошло? Во всяком случае - это элегантный подход, если бы он мог работать.

Домоаригато

1

Я вижу, в чем проблема. Была опечатка attrs.onReady, должно быть то, что есть сейчас. Другая проблема заключалась в том, что я назвал это забавным .... ... что я получаю за преобразование coffeescript из памяти в JS.

Юзопи

1

Я думаю, что в некоторых случаях это может быть хорошо, но мои аргументы против этого таковы: я думаю, что ожидания его кода при простом взгляде состоят в том, что он вернет какое-то текстовое значение для отображения в DOM, поэтому для этого требуется внимательный взгляд; Это не допускает никакой синхронизации с точки зрения приоритета директивы, вы застряли на уровне контроллера, если не используете $timeout; Вы явно создаете надстройку. DOM-узел просто для выполнения не-DOM-логики; Его можно использовать повторно, только если этот метод находится далеко в иерархии $ scope, так что дочерние области наследуют его, я просто думаю, что он выглядит плохо в перспективе NG;

Юзопи

5

Работал для меня после добавления $timeout(function() {})всего elem.ready(). В противном случае это была $digest already in progressошибка. Но в любом случае, спасибо огромное! Я боролся с этим в течение последнего часа.

rkrishnan

1

Копание $ scope кажется пустым. Любые идеи?

MiloTheGreat

66

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

Вот такой Plunker Link.

синий
источник

6

Не могли бы вы более подробно изложить свой ответ, добавив чуть больше описания предлагаемого вами решения?

abarisone

Я думаю, что вы хотите вызвать функцию, когда этот HTML-элемент загружен. Так что вызовите эту функцию, как указано выше. Если мои предположения верны в отношении ваших сомнений, тогда это сработает, в противном случае, пожалуйста, уточните свой вопрос. :)

синий

14

При вызове такой функции Убедитесь, что он вызывается один раз или иначе цикл дайджеста будет бесконечным и выдает ошибку

Ашан

2

Мне

1

Это фантастика - только одна проблема. Похоже, что моя функция запускается 5 раз, когда я использую это. Я добавил счетчик, чтобы он работал нормально, но мне просто интересно, если кто-нибудь знает, почему это произойдет ... Кажется немного странным, вы знаете?

itchyspacesuit

22

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

Саад Зульфикар
источник

Я использовал это, но в верхней части страницы, инициализация требовала загрузки уже некоторого div, поэтому перемещение ng-init в конец страницы устранило мою проблему, хороший совет, и это имеет смысл.

Gurnard

единственный ответ, который помог мне с моей проблемой (пустой выбор jquery для мобильных устройств)

kaiser

Это реальный ответ, поскольку он адаптируется к динамически загруженным элементам управления и очень прост в реализации.

Джейсон Себринг,

этот ответ сэкономил мне некоторое время, настолько элегантный и эффективный для моего случая использования

Sello

4

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

}] );

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

Алок Д
источник

3

Вы можете вызвать 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>

Даршан Джайн
источник

Пожалуйста, добавьте пример кода, чтобы показать, как ОП может решить проблему

Jro

@jro Обновил мой ответ. Надеюсь, что это будет полезно :)

Даршан Джайн

2

Если вы получаете сообщение об ошибке $ 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);
                }

            })
        }
    }

Джон Смит
источник

0

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

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

Внутри module.run(function()...)angular у вас будет весь доступ к структуре модуля и зависимостям.

Вы можете broadcastи emitсобытия для связи мостов.

Например:

модуль устанавливает событие загрузки и логику сборки
Событие модуля транслируется на контроллеры, когда этого требует логика
контроллеры будут слушать и выполнять свою собственную логику, основанную на процессах загрузки модуля.

Луис Д. Васкес Ривера
источник

0

Я использую {{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();
});

}]);

Нян
источник

Я попробовал все ответы здесь и по какой-то причине $ timeout - единственное, что сработало для меня. Не знаю почему, но это может иметь какое-то отношение к ng-include и времени запуска сервисов.

Дреллгор

Я добавил один плюс для {{myFunction ()}}

commonpike

0

Если вы хотите, чтобы определенный элемент был полностью загружен, используйте ng-init для этого элемента.

например <div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"> ..</div>

функция initModalFacultyInfo () должна существовать в контроллере.

NetDeveloper
источник

0

Я обнаружил, что если у вас есть вложенные представления - $ 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 ++;
});

Maksym
источник

0

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

Шреянш Кумар
источник

Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, повышает его долгосрочную ценность.

Rollstuhlfahrer

0

Решение, которое работает для меня, заключается в следующем

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()">

Хорхе Сантос Нил
источник

-31

Я использую, 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);

xiangry
источник

13

Люди все еще рекомендуют setIntervalв качестве решения в 2016 году ?

Захари Дахан

но нет простого API в agular ... как .. как это сделать?

Петр Кула

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

Ответы:

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

JS

HTML