当ng-if失效时,ng-class不会更新。当标签失焦时

时间:2015-06-25 07:33:38

标签: javascript angularjs angularjs-scope

我已经添加了一个拦截器来显示加载器,同时进行api调用。每隔60秒就会使用$intervel调用2个api请求。当页面处于焦点时,一切都按预期工作,当$ intervel提出请求时,Loader会显示。

问题是当标签未对焦时发出请求。它将启用加载程序但不禁用它。 {{show_loader1}}显示为false。但为什么它没有反映在ng-class?

app.config中的拦截器

$httpProvider.interceptors.push(function($q,$rootScope) {

                return {
                    'request': function(config) {
                        $rootScope.loaders1++;
                        console.log('requestStart', $rootScope.loaders1);
                        if ($rootScope.loaders1 > 0) {
                            $rootScope.show_loader1 = true;
                        }
                        if(!$rootScope.$$phase) {
                            console.log("Appalying root scope from requestStart");
                            $rootScope.$apply();
                        }
                        return config;
                    },
                    'response': function(response) {
                        $rootScope.loaders1--;
                        console.log('requestComplete', $rootScope.loaders1);
                        if ($rootScope.loaders1 <= 0) {
                            $rootScope.show_loader1 = false;
                        }
                        if(!$rootScope.$$phase) {
                            console.log("Appalying root scope from request End");
                            $rootScope.$apply();
                        }
                        return response;
                    }
                };

            });

HTML

<div class="butterbar" ng-class="{active:show_loader1,'hide':!show_loader1}"><span class="bar"></span></div>

控制台输出

requestStart 1
2015-06-25 12:51:35.547 config.js:23 requestStart 2
2015-06-25 12:51:35.548 config.js:23 requestStart 3
2015-06-25 12:51:35.548 config.js:23 requestStart 4
2015-06-25 12:51:35.548 config.js:23 requestStart 5
2015-06-25 12:51:35.548 config.js:23 requestStart 6
2015-06-25 12:51:35.548 config.js:23 requestStart 7
2015-06-25 12:51:35.548 config.js:23 requestStart 8
2015-06-25 12:51:35.559 config.js:35 requestComplete 7
2015-06-25 12:51:35.559 config.js:35 requestComplete 6
2015-06-25 12:51:35.559 config.js:35 requestComplete 5
2015-06-25 12:51:35.660 config.js:23 requestStart 6
2015-06-25 12:51:35.660 config.js:23 requestStart 7
2015-06-25 12:51:35.660 config.js:23 requestStart 8
2015-06-25 12:51:35.660 config.js:23 requestStart 9
2015-06-25 12:51:35.661 config.js:35 requestComplete 8
2015-06-25 12:51:35.661 config.js:35 requestComplete 7
2015-06-25 12:51:35.661 config.js:35 requestComplete 6
2015-06-25 12:51:35.661 config.js:35 requestComplete 5
2015-06-25 12:51:35.699 config.js:23 requestStart 6
2015-06-25 12:51:35.700 config.js:23 requestStart 7
2015-06-25 12:51:35.700 config.js:23 requestStart 8
2015-06-25 12:51:35.700 config.js:35 requestComplete 7
2015-06-25 12:51:35.700 config.js:35 requestComplete 6
2015-06-25 12:51:35.700 config.js:35 requestComplete 5
2015-06-25 12:51:35.972 config.js:35 requestComplete 4
2015-06-25 12:51:36.651 config.js:35 requestComplete 3
2015-06-25 12:51:36.685 config.js:35 requestComplete 2
2015-06-25 12:51:36.711 config.js:35 requestComplete 1
2015-06-25 12:51:36.715 config.js:23 requestStart 2
2015-06-25 12:51:36.887 config.js:35 requestComplete 1
2015-06-25 12:51:37.795 config.js:35 requestComplete 0
2015-06-25 12:52:35.618 config.js:23 requestStart 1
2015-06-25 12:52:35.631 config.js:23 requestStart 2
2015-06-25 12:52:36.675 config.js:35 requestComplete 1
2015-06-25 12:52:36.747 config.js:35 requestComplete 0
2015-06-25 12:53:35.617 config.js:23 requestStart 1
2015-06-25 12:53:35.631 config.js:23 requestStart 2
2015-06-25 12:53:36.679 config.js:35 requestComplete 1
2015-06-25 12:53:36.765 config.js:35 requestComplete 0
2015-06-25 12:54:35.618 config.js:23 requestStart 1
2015-06-25 12:54:35.630 config.js:23 requestStart 2
2015-06-25 12:54:36.685 config.js:35 requestComplete 1
2015-06-25 12:54:36.749 config.js:35 requestComplete 0
2015-06-25 12:55:35.621 config.js:23 requestStart 1
2015-06-25 12:55:35.643 config.js:23 requestStart 2
2015-06-25 12:55:36.684 config.js:35 requestComplete 1
2015-06-25 12:55:36.765 config.js:35 requestComplete 0
2015-06-25 12:56:35.618 config.js:23 requestStart 1
2015-06-25 12:56:35.632 config.js:23 requestStart 2
2015-06-25 12:56:36.680 config.js:35 requestComplete 1
2015-06-25 12:56:36.742 config.js:35 requestComplete 0
2015-06-25 12:57:35.617 config.js:23 requestStart 1
2015-06-25 12:57:35.629 config.js:23 requestStart 2
2015-06-25 12:57:36.678 config.js:35 requestComplete 1
2015-06-25 12:57:36.743 config.js:35 requestComplete 0
2015-06-25 12:58:35.618 config.js:23 requestStart 1
2015-06-25 12:58:35.632 config.js:23 requestStart 2
2015-06-25 12:58:36.678 config.js:35 requestComplete 1
2015-06-25 12:58:36.743 config.js:35 requestComplete 0
2015-06-25 12:59:35.619 config.js:23 requestStart 1
2015-06-25 12:59:35.631 config.js:23 requestStart 2
2015-06-25 12:59:36.675 config.js:35 requestComplete 1
2015-06-25 12:59:36.743 config.js:35 requestComplete 0
2015-06-25 13:00:35.618 config.js:23 requestStart 1
2015-06-25 13:00:35.629 config.js:23 requestStart 2
2015-06-25 13:00:36.675 config.js:35 requestComplete 1
2015-06-25 13:00:36.743 config.js:35 requestComplete 0
2015-06-25 13:01:22.639 config.js:23 requestStart 1
2015-06-25 13:01:23.719 config.js:35 requestComplete 0
2015-06-25 13:01:35.624 config.js:23 requestStart 1
2015-06-25 13:01:36.734 config.js:35 requestComplete 0

1 个答案:

答案 0 :(得分:0)

这是AngularJS中的已知问题 https://github.com/angular/angular.js/issues/12842