完成加载ng-include在角度js

时间:2014-12-20 03:28:44

标签: angularjs angularjs-directive

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

感谢您的任何想法。

6 个答案:

答案 0 :(得分:71)

根据您的需要,有两种方法可以检测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){
     //...
  });
});

完成加载内容后

答案 1 :(得分:15)

您可以使用onload,如下所示

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

在控制器中,

$scope.finishLoading = function() {

}

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

这是工作Demo Plunker

答案 2 :(得分:8)

您可以使用此代码:

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

答案 3 :(得分:0)

这是一个完整的示例,它将捕获应用程序发出的所有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-appng-controller

答案 4 :(得分:0)

如果我必须等待元素出现,我用$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包含需要几毫秒渲染的指令。

答案 5 :(得分:0)

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

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

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

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