Завершена загрузка ng-include в angular js

Каков наилучший способ определения завершения загрузки html по ng -include. Я хочу написать код, когда он будет завершен.

Спасибо за любую идею.

Ответ 1

Существует два способа определить, когда ng-include закончила загрузку, в зависимости от ваших потребностей:

1) через onload атрибут - для встроенных выражений. Пример:

<div ng-include="'template.html'" onload="loaded = true"></div>

2) через событие $includeContentLoaded, которое ng-include испускает - для обработки всего приложения. Пример:

app.run(function($rootScope){
  $rootScope.$on("$includeContentLoaded", function(event, templateName){
     //...
  });
});

при завершении загрузки содержимого

Ответ 2

вы можете использовать onload для него, как показано ниже

<div ng-include=".." onload="finishLoading()"></div>

в контроллере,

$scope.finishLoading = function() {

}

после загрузки функции scope ng-include finishLoading вызовет.

вот рабочий Demo Plunker

Ответ 3

Вы можете использовать этот код:

$scope.$on('$includeContentLoaded', function () {
    // it has loaded!
});

Ответ 4

Вот полный пример, который поймает все события загрузки ng-include, испускаемые приложением:

<html ng-app="myApp">
  <head>
    <script src="angular.min.js"></script>
  </head>
  <body ng-controller="myController">
    <div ng-include="'snippet.html'"></div>
    <script>
      var myApp = angular.module("myApp",[]);
      myApp.controller('myController', function($scope) {
        $scope.$on('$includeContentLoaded', function(event, target){
          console.log(event);  //this $includeContentLoaded event object
          console.log(target); //path to the included resource, 'snippet.html' in this case
        });
      });
    </script>
  </body>
</html>

Проблема, с которой я столкнулась, и причина, по которой я трачу время, чтобы опубликовать это, заключается в том, что я не смог включить в свою HTML разметку ng-app и ng-controller.

Ответ 5

Если мне нужно подождать, пока элемент будет присутствовать, я завершу $timeout с помощью $includeContentLoaded:

var selector = '#foo';
$rootScope.$on('$includeContentLoaded', function(event, templateName){
  $timeout(() => {
    const $el = angular.element(selector);
    if ($el.length) {
      // Do stuff with element.
    }
  });
});

Таймаут дает правильную загрузку времени, особенно если ng-include содержит директиву, которая занимает несколько миллисекунд для рендеринга.