javascript - 监听指令以完成在 DOM 中的加载 - AngularJS

Question

只要指令尚未完成加载页面上的所有子元素，我就想提供加载指示。

我的应用程序的这一部分有选项卡，单击这些选项卡将加载选项卡内容。我遇到的问题是某些选项卡内容需要很长时间才能呈现。

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

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

代码非常基础:

Controller :

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>

Answer 1

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 对于装饰性的东西是可以的。

这取决于上下文，当您可以使用 require 与父指令对话时，没有必要污染 $rootScope。

请记住，使用自己的加载指示器而不是全局指示器使指令自包含更直接。