查看视图在angularjs中更改时的视图

Question

有人知道如何在视图更改时使角度激发成为事件吗？或者当请求并下载视图时正确？我试图为页面更改时添加加载动画。

Answer 1

看看this thread它看起来像$httpProvider.responseInterceptors是一个很好的地方添加这种类型的东西。

This fiddle显示了一个很好的示例，说明在哪里添加代码以启动/停止a​​jax请求的微调器。 This fiddle是类似的，但实际上显示并隐藏了“加载...”div。

如果你只是想显示微调时的看法改变，你可以限制你的开始/停止代码时content-type等于text/html类似于显示了application/jsonthis post来。

注意：在我的测试中，当检索我的.html文件时，spinnerFunction中的headersGetter()['Content-Type']被忽略，而在进行服务调用时它被填充。

Answer 2

我认为一个更简单，适应性更强的方法是使用AngularJS $http.pendingRequests.length调用。它返回挂起的ajax呼叫计数。所以当它达到0时，你的页面已经完成加载。

您可以创建一个指令，在任何元素上插入加载div（scrim），然后等待所有ajax调用来解析并删除您的微调器。

下面的代码的肉，让您的AngularJS指令：

 // Prepend the loading div to the dom element that this directive is applied. 
     var scrim = $('<div id="loading"></div>'); 
     $(scrim).prependTo(domElement); 

     /** 
     * returns the number of active ajax requests (angular + jquery) 
     * $.active returns the count of jQuery specific unresolved ajax calls. It becomes 0 if 
     * there are no calls to be made or when calls become finished. 
     * @return number of active requests. 
     */ 
     function totalActiveAjaxRequests() { 
      return ($http.pendingRequests.length + $.active); 
     } 

     /** 
     * Check for completion of pending Ajax requests. When they're done, 
     * remove the loading screen and show the page data. 
     */ 
     scope.$watch(totalActiveAjaxRequests, function whenActiveAjaxRequestsChange() { 
      if(totalActiveAjaxRequests() === 0){ 
       $log.log("done loading ajax requests"); 
       $(scrim).remove(); 
       $(domElement).css("position", "inherit"); 
      } 
     }); 

请注意，$。主动是未公开。