Question

当视图发生变化时，是否有人知道如何使角度射击成为事件？或者在请求和下载视图时正确？我正在尝试为页面更改时添加加载动画。

Answer 1

看看this thread看起来$httpProvider.responseInterceptors是添加此类内容的好地方。

This fiddle显示了一个很好的示例，说明在何处添加代码以启动/停止针对ajax请求的微调器。 This fiddle类似，但实际上显示并隐藏了“正在加载...”div。

如果您只想在观看次数发生变化时显示微调器，则可以将开始/停止代码限制为content-type等于text/html，类似于this post与application/json显示的内容。

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

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

请注意，$ .active未记录。

跟踪以查看视图在angularjs中的变化

2 个答案: