在完成angularjs中视图中的所有ajax函数调用之前会触发$ viewContentLoaded

Question

我创建了用于在视图中显示黄油条的代码。这里的问题是，我有一个ajax调用函数来填充我的html页面中的datatables，但是UI已准备就绪，因此它触发了$ViewContentLoaded函数来隐藏黄油条。但是我需要显示此栏，直到所有ajax调用和视图都完全呈现为止。我尝试过SetTimeout，但是这样做并不是正确的方法，我认为是这样。如何实现呢？ 预先感谢。

angular.module('app')
  .directive('uiButterbar', ['$rootScope', '$anchorScroll', function ($rootScope, $anchorScroll) {
      return {
          restrict: 'AC',
          template: '<span class="bar"></span>',
          link: function (scope, el, attrs) {
              el.addClass('butterbar hide');
              scope.$on('$stateChangeStart', function (event) {
                  $anchorScroll();
                  el.removeClass('hide').addClass('active');
              });
              scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState) {
                  event.targetScope.$watch('$viewContentLoaded', function () {
                      setTimeout(function () { el.addClass('hide').removeClass('active'); }, 5000);
                  })
              });
          }
      };
  }]);