AngularJS 服务配置值在缩小时被破坏

Question

在缩小和 AngularJS 方面遇到一些麻烦;-(

我找到了这个jsfiddle通过 AngularJS Wiki 页面“加载”HTTP 请求的扩展程序。

它工作得很好，直到我发布它，并且缩小破坏了它。我找不到在配置上使用“注入(inject)”的方法，所以我有点不知道该怎么做。

原始代码:

angular.module("app.services", []).config(function($httpProvider) {
  var spinnerFunction;
  $httpProvider.responseInterceptors.push("myHttpInterceptor");
  spinnerFunction = function(data, headersGetter) {
    $("#loader").show();
    return data;
  };
  return $httpProvider.defaults.transformRequest.push(spinnerFunction);
}).factory("myHttpInterceptor", function($q, $window) {
  return function(promise) {
    return promise.then((function(response) {
      $("#loader").hide();
      return response;
    }), function(response) {
      $("#loader").hide();
      return $q.reject(response);
    });
  };
});

缩小代码:

angular.module("app.services", []).config(function (a) {
    var b;
    a.responseInterceptors.push("myHttpInterceptor");
    b = function (d, c) {
        $("#loader").show();
        return d
    };
    return a.defaults.transformRequest.push(b)
}).factory("myHttpInterceptor", function (a, b) {
    return function (c) {
        return c.then((function (d) {
            $("#loader").hide();
            return d
        }), function (d) {
            $("#loader").hide();
            return a.reject(d)
        })
    }
});

这会引发以下错误:错误:未知提供商:来自 app.services

Answer 1

使用inline annotation用于定义提供者:

angular.module("app.services", [])
  .config(
    [
      '$httpProvider',
      'myHttpInterceptor',
      function($httpProvider, myHttpInterceptor) {
        var spinnerFunction;
        $httpProvider.responseInterceptors.push(myHttpInterceptor);
        spinnerFunction = function(data, headersGetter) {
         $("#loader").show();
         return data;
        };
        return $httpProvider.defaults.transformRequest.push(spinnerFunction);
      }
    ]
  );

而且，顺便说一句，您应该重新考虑在配置和工厂中使用 jQuery 调用。直接 DOM 操作应在指令内处理。

对于您的情况，您应该代替 $("#loader").show(); 和 $("#loader").show();广播事件(例如 $rootScope.$broadcast('loader_show'))，然后在自定义“spinner”指令中监听该事件:

HTML:

<div spinner class="loader"></div>

JS:

app.directive('spinner',
    function() {
      return function ($scope, element, attrs) {
        $scope.$on('loader_show', function(){
          element.show();
        });

        $scope.$on('loader_hide', function(){
          element.hide();
        });
      };

    }

  );