Angular 指令不应用在刷新时对代码所做的更改

Question

所以我有一个非常基本的指令，我将其包含在我的基本 cshtml 文件中，该指令在加载路由的解析时显示，然后在加载解析后隐藏。效果很好：

(function () {
    'use strict';

    angular.module('app.directives.resolveLoader', [
        'ngRoute'
    ])
        .directive('resolveLoader', ['$rootScope', '$timeout', '$log', function ($root, $timeout, $log) {
            return {
                replace: true,
                restrict: 'E',
                template: '<div id="resolve-loader">' +
                              '<i class="fa fa-5x fa-spin fa-circle-o-notch emerald-font"></i>' + 
                              '<h3>Loading</h3>' + 
                          '</div>',
                link: function (scope, ele, attrs) {
                    $root.$on('$routeChangeStart', function (event, currentRoute, previousRoute) {
                        $log.info('app.directives.resolveLoader(): Showing resolve-loader');
                        $timeout(function () {
                            ele.removeClass('ng-hide');
                        });
                    });

                    $root.$on('$routeChangeSuccess', function () {
                        $log.info('app.directives.resolveLoader(): Hiding resolve-loader');
                        ele.addClass('ng-hide');
                        $log.info('app.directives.resolveLoader(): ' + ele.hasClass('ng-hide'));
                    })
                }
            }
        }]);
})();

每次我转到我的应用程序中已解析的新路由时，我都会在我的控制台中看到：

app.directives.resolveLoader(): Showing resolve-loader
app.directives.resolveLoader(): Hiding resolve-loader
app.directives.resolveLoader(): true

如果我刷新页面 (F5 或 Ctrl + F5)，但它实际上从未隐藏元素，我没有看到 ng-hide class 应用于 DOM.

中的元素

知道为什么会这样吗？

Answer 1

解决方案是将 ele.addClass() 包装在 $timeout 函数中，如下所示：

                $root.$on('$routeChangeSuccess', function () {
                    $log.info('app.directives.resolveLoader(): Hiding resolve-loader');
                    $timeout(function () {
                        ele.addClass('ng-hide');
                    });
                })

Angular 指令不应用在刷新时对代码所做的更改

Angular Directive not applying changes made in code on refresh

angularjs

angularjs-directive