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

Question

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

Answer 1

看一下这个线程看起来好像$httpProvider.responseInterceptors是添加这类东西的好地方.

这个小提琴显示了一个很好的例子,说明在哪里添加代码来启动/停止a​​jax请求的微调器.这个小提琴类似,但实际上显示并隐藏了一个'Loading ...'div.

如果你只是想显示微调时的看法改变,你可以限制你的开始/停止代码时content-type等于text/html类似于这篇文章显示了application/json.

注意:在我的测试headersGetter()['Content-Type']中,spinnerFunction在检索我的.html文件时看起来像是在省略,而在进行服务调用时会填充它.

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未记录.