angularjs - 跟踪以查看 angularjs 中的视图何时更改

Question

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

Answer 1

看看这个线程，它看起来$httpProvider.responseInterceptors是添加这类东西的好地方。

这个小提琴展示了一个很好的例子，说明在哪里添加代码来启动/停止 ajax 请求的微调器。这个小提琴很相似，但实际上显示并隐藏了一个“正在加载...” div。

如果您只想在视图更改时显示一个微调器，您可以将您的开始/停止代码限制为content-type等于text/html类似于这篇文章显示的内容application/json。

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

Answer 2

我认为更简单、适应性更强的方法是使用 AngularJS$http.pendingRequests.length调用。它返回待处理的 ajax 调用计数。所以当它到达时0，你的页面就完成了加载。

您可以创建一个指令，在任何元素上插入加载 div（稀松布），然后等待所有 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 是无证的。