Question

通过ng -include检测html加载完成的最佳方法是什么。我想在完成加载时编写一些代码。

感谢您的任何想法。

Answer 1

根据您的需要，有两种方法可以检测ng-include何时完成加载：

1）通过onload属性 - 用于内联表达式。例如：

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

2）通过ng-include发出的$includeContentLoaded事件 - 进行应用范围的处理。例如：

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

完成加载内容后

Answer 2

您可以使用onload，如下所示

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

在控制器中，

$scope.finishLoading = function() {

}

加载后ng-include finishLoading范围函数将调用。

这是工作Demo Plunker

Answer 3

您可以使用此代码：

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

Answer 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。

Answer 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包含需要几毫秒渲染的指令。

Answer 6

仅使用JS调用堆栈技巧可以替代。将ng-init="eventName"放在所需的元素上。之后，在角度控制器上声明事件：

$scope.eventName = () => {
  setTimeout(() => { alert('loaded!'); }, 0);
}

这使得警报仅在加载有关角度的所有内容时才弹出，这是由于JavaScript的调用栈将某些代码视为微任务而将其他代码视为宏任务而引起的，它们具有优先级，例如微任务始终优先运行在所有微任务运行之后，宏任务可以在调用堆栈中占据一席之地。

而且，setTimeout()被视为JavaScript的宏任务，因此它将仅作为最新任务运行。

完成加载ng-include在角度js

6 个答案: