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

因此，我有一个非常基本的指令，它包含在我的基本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'));
                    })
                }
            }
        }]);
})();

如果我刷新一个页面（F5或Ctrl+F5），我会看到同样的情况，但是它实际上从未隐藏元素，我也没有看到将

ng hide

类应用于DOM中的元素

---

知道为什么会这样吗？

解决方案是将

ele.addClass（）

包装在$timeout函数中，如下所示：

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

---

没关系，我知道了。需要将

ele.hideClass（）

调用包装到$timeout函数中。

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