Javascript 在控制器之前执行指令代码_Javascript_Angularjs_Angularjs Directive

Javascript 在控制器之前执行指令代码

javascript angularjs

Javascript 在控制器之前执行指令代码,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,您好，我正在尝试创建一个显示加载框实现，但我似乎遇到了一些问题。以下是我到目前为止的情况：我已经创建了一个httpInterceptor： mainModule.factory('httpLoadingInterceptorSvc', ['$q', '$injector', 'EVENTS', function ($q, $injector, EVENTS) { var httpInterceptorSvc = {}; httpInterceptorSv

您好，我正在尝试创建一个显示加载框实现，但我似乎遇到了一些问题。以下是我到目前为止的情况：

我已经创建了一个httpInterceptor：

   mainModule.factory('httpLoadingInterceptorSvc', ['$q', '$injector', 'EVENTS', function ($q, $injector, EVENTS) {
        var httpInterceptorSvc = {};

        httpInterceptorSvc.request = function (request) {
            var rootScope = $injector.get('$rootScope');
            rootScope.$broadcast(EVENTS.LOADING_SHOW);
            return $q.when(request);
        };

        httpInterceptorSvc.requestError = function (rejection) {
            hideLoadingBox();
            return $q.reject(rejection);
        };

        httpInterceptorSvc.response = function (response) {
            hideLoadingBox();
            return $q.when(response);
        };

        httpInterceptorSvc.responseError = function (rejection) {
            hideLoadingBox();
            return $q.reject(rejection);
        };

        function hideLoadingBox() {
            var $http = $injector.get('$http');

            if ($http.pendingRequests.length < 1) {
                var rootScope = $injector.get('$rootScope');
                rootScope.$broadcast(EVENTS.LOADING_HIDE);
            }
        }

        return httpInterceptorSvc;
    }]);

然后我创建了一个指令：

 mainModule.directive('loadingDir', ['EVENTS', function (EVENTS) {
    var loadingDir = {
        restrict: 'E',
        templateUrl: 'App/scripts/main/directives/loading/LoadingDir.html'
    };

    loadingDir.link = function (scope, element) {
        element.hide();

        scope.$on(EVENTS.LOADING_SHOW, function () {
            element.show();
        });

        scope.$on(EVENTS.LOADING_HIDE, function () {
            element.hide();
        });
    };

    return loadingDir;
}]);

然后添加了一个简单的ajaxCall，用于提醒控制器上的消息：

dataSvc.getCurrentDate().then(function(currentDate) {
        alert(currentDate);
    });

我在html页面上放置了该指令：

<loading-dir></loading-dir>

现在我的问题是，指令代码在控制器代码之后执行，这使得直接代码在页面加载之前相对可用。有没有办法使指令代码在控制器之前执行？

您可以在页面上预加一个div：

<body>

    <div controller="beforeController">

        <loading-dir></loading-dir>

    </div>

[Rest of the page]

</body>


[本页其余部分]

问题是我需要在页面的特定位置添加该指令。我不想在一个位置全局添加该指令。我不知道如何或为什么可以在页面中定位指令，但必须在加载页面之前加载该指令。对不起，这对我来说毫无意义。这可能是一个无意义的问题……我两周前刚开始学习，我几乎不明白它是如何工作的：P

<body>

    <div controller="beforeController">

        <loading-dir></loading-dir>

    </div>

[Rest of the page]

</body>