Question

您好我正试图在我的角度应用程序中创建一个laoding box，这是我到目前为止：

这是loadingBox指令：

   app.directive('loadingBoxDir', function (eventsSvc) {
    var loadingBoxDir = {
        templateUrl: '/Scripts/App/Infrastructure/Directives/loadingBoxView.html',
        restrict: "E",
        scope: {
            isLoadingBoxVisible: '='
        }
    };

    loadingBoxDir.link = function ($scope, $element) {
        var loadingBox = $element.find('.fa-spinner');
        var body = angular.element('body');
        var loadingBoxParent = $element.find('#global-spinner');

        loadingBox.css({
            "position": "absolute",
            "top": body.height() / 2 - loadingBox.height() / 2 + "px",
            "left": body.width() / 2 - loadingBox.width() / 2 + "px"
        });

        $scope.$on(eventsSvc.global.loadingBoxShow, function () {
            loadingBoxParent.addClass('global-spinner-visible');
        });

        $scope.$on(eventsSvc.global.loadingBoxHide, function() {
            loadingBoxParent.removeClass('global-spinner-visible');
        });
    }

    return loadingBoxDir;
});

这是我的拦截器：

    app.provider('httpInterceptorSvc', [function () {
    this.$get = function ($q, $rootScope, $injector, eventsSvc) {
        var httpInterceptorSvc = {};

        httpInterceptorSvc.request = function (requestParam) {
            $rootScope.$broadcast(eventsSvc.global.loadingBoxShow);
            return requestParam;
        }

        httpInterceptorSvc.response = function (responseParam) {
            hideLoadingBox();
            return responseParam;
        }

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

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

        function hideLoadingBox() {
            var $http = $injector.get('$http');
            if ($http.pendingRequests.length === 0) {
                $rootScope.$broadcast(eventsSvc.global.loadingBoxHide);
            }
        }

        return httpInterceptorSvc;
    }
}])

这是活动服务：

    app.factory('eventsSvc', [function () {
    var eventsSvc = {
        global: {
            loadingBoxHide: 'global.loadingBox.hide',
            loadingBoxShow: 'global.loadingBox.show'
        }
    };

    return eventsSvc;
}])

现在您可以在请求和响应中看到拦截器，我正在尝试广播到loadingBoxDir。问题是请求广播没有达到指令。

一个有趣的事实是，响应广播达到了指令，我无法弄清楚两者之间有什么区别

谁能告诉我我做错了什么？

Answer 1

我弄清楚了代码的问题。想法是ajax调用会在页面加载后立即执行，但是指令没有时间进行初始化，这就是为什么当广播被调用时它没有在功能上达到这个目的：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace Testimonial.Models
{
    // Collection of User Input fields
    public class Client
    {
        public virtual int ClientId { get; set; }
        [Required]
        [StringLength(160)]
        [Display(Name="Business Name")]
        public virtual string BizName { get; set; }
        [StringLength(160)]
        [Display(Name="First Name")]
        public virtual string FirstName { get; set; }
        [StringLength(160)]
        [Display(Name = "Last Name")]
        public virtual string LastName { get; set; }
        [StringLength(160)]
        public virtual string WebSite { get; set; }
        [StringLength(160)]
        public virtual string Address { get; set; }
        [StringLength(160)]
        public virtual string City { get; set; }
        public virtual Enum.State State { get; set; }
        [DataType(DataType.PostalCode)]
        public virtual int Postalcode { get; set; }
        [DataType(DataType.PhoneNumber)]
        public virtual string Phone { get; set; }
        [DataType(DataType.EmailAddress)]
        public virtual string Email { get; set; }
        [Display(Name = "Service Type")]
        public virtual int ServiceTypeId { get; set; }
        public virtual ServiceType ServiceType { get; set; }
        [Display(Name="Testimonial")]
        public virtual int ReviewId { get; set; }
        //[Required(ErrorMessage="You must enter a testimonial.")]
        public virtual Review Review { get; set; }
    }
}

为了解决这个问题，我添加了这段代码：

$scope.$on(eventsSvc.global.loadingBoxShow, function () {
        loadingBoxParent.addClass('global-spinner-visible');
 });

这样做会在页面加载时立即显示加载框，这是有意义的，因为我在控制器中执行ajax调用。

响应广播运行时，HttpInterceptor请求广播未运行

1 个答案: