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

只要指令尚未完成将所有它的子元素加载到页面上，我想提供加载指示。监听指令已完成在DOM中的加载 - AngularJS

我应用程序的这一部分有一些标签，点击后会加载标签内容。我遇到的问题是一些标签内容需要很长时间才能呈现。

我认为这是我的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>

来源

2015-07-12 a7omiton

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'); 
     }); 
     } 
    }; 
});

不能确保DOM是那里当link运行后，取决于嵌套指令的实现（例如ng-repeat已知是晚布卢姆）。要么你不能确定他们没有异步的东西需要一些时间才能完成，但$timeout零延迟适用于化妆品。

这取决于上下文，当您可以通过require与父指令通话时，不必污染$rootScope。

请记住，使指令独立于其自己的加载指示符而不是全局指示符是更直接的。

来源

2015-07-12 13:30:13 estus

纠正我，如果我错了，通过使用这个我会显示我的加载指标在我的'Service.get_data'调用和广播一个事件，然后使用'$ emit'来表明这个事件是完整的？如果可能，我想保留该指令自成一体 – a7omiton

在您的示例中，不清楚控制器和服务与tab指令的关系。你是否正在像'ng-click =“get_data（...）'在tab指令中做什么？ – estus

是的，这是正确的 – a7omiton

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

回答

相关问题