在DOM - AngularJS中等待指令完成加载

Listen for directive to have completed loading in DOM - AngularJS

本文关键字：指令 加载 等待 DOM AngularJS      更新时间：2023-09-26

我想提供一个加载指示，只要指令还没有完成加载页面上的所有子元素。

我的应用程序的这一部分有标签，当点击将加载标签内容。我的问题是，一些选项卡的内容需要很长时间来渲染。

我以为是我的HTTP请求导致了渲染的延迟，并求助于使用自定义承诺，但在实现之后，我发现实际上是指令的DOM渲染花了这么长时间。

如果我想在此指令内呈现所有内容之前显示加载指示器，那么在指令中收听的正确事件是什么?据我所知，$viewContentLoaded只用于ngView指令，但这个指令是ngView的子指令，所以它不适用(我认为)。

代码非常基本:

控制器:

angular.module('app', [])
.controller('MyController', ['$scope', 'Service', function($scope, Service) {
    
    $scope.get_data = function(user) {
        Service.getsomething(user).then(function(response) {
            $scope.data = response.data;
        },
        function(error) {
            console.log(error);
        });
    };
    
}])
.directive('tab', function() {
        return {
            restrict: 'E',
            templateUrl: 'templates/tab.html'
        };
    })
HTML: 

<div role="tabpanel">
    <ul class="nav nav-pills col-lg-9 col-lg-offset-3" role="tablist">
        <li toggle-tabs class="active">
             <a href="#apanel">Panel</a>
        </li>
    </ul>
    <div class="tab-content col-lg-12">
        <tab></tab> //within here there are many forms
    </div>
</div>

angular.module('app').directive('tab', function($timeout, $rootScope) {
  return {
      restrict: 'E',
      templateUrl: 'templates/tab.html',
      link: function (scope, element, attrs, ctrl) {
        $timeout(function () {
          $rootScope.$emit('directive-dom-is-most-likely-there');
        });
      }
  };
});

当link运行时，你不能确定DOM在那里，它取决于嵌套指令的实现(例如，ng-repeat已知是一个晚开者)。要么你不能确定他们都没有异步的东西，需要一些时间来完成，但$timeout与零延迟是ok的化妆品的东西。

这取决于上下文，当你可以用require与父指令交谈时，没有必要污染$rootScope。

请记住，让指令自包含自己的加载指示符比全局加载指示符更直接。
相关文章：