AngularJS服務配置價值被摧毀的微小

遇到一些麻煩縮小和AngularJS ;-(AngularJS服務配置價值被摧毀的微小

我發現HTTP請求這個jsfiddle「加載」擴展，通過AngularJS Wiki頁面。

這真是棒極了。直到我刊登出來，並縮小破壞它我不能找到一種方法，使用「注入」的配置，所以IM有點失去了做什麼

原始代碼：

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

來源

2013-03-11 Marco Johannesen

使用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')），然後聽您的自定義 '微調' 指令，事件：

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(); 
     }); 
     }; 

    } 

);

來源

2013-03-11 15:26:15 Stewie

只是澄清，它實際上被稱爲「內聯註釋」。 – 2013-03-11 15:39:32

是的，已更正。 – Stewie 2013-03-11 15:44:10

感謝您的建議;-) 我得到以下錯誤，使用您編寫的代碼'未捕獲的錯誤：未知的提供者：myHttpInterceptorProvider < - myHttpInterceptor < - $ http < - $ compile'得到了什麼錯誤是由什麼引起的？ – 2013-03-11 16:00:00

只爲其他人在相同的情況下...我遵循@Stewie的建議，並取而代之，whi CH僅使用AngularJS代碼，沒有愚蠢的jQuery的依賴;-)

服務：

app.config([ 
    "$httpProvider", function($httpProvider) { 
    var spinnerFunction; 
    $httpProvider.responseInterceptors.push("myHttpInterceptor"); 
    spinnerFunction = function(data, headersGetter) { 
     return data; 
    }; 
    return $httpProvider.defaults.transformRequest.push(spinnerFunction); 
    } 
]).factory("myHttpInterceptor", [ 
    "$q", "$window", "$rootScope", function($q, $window, $rootScope) { 
    return function(promise) { 
     $rootScope.$broadcast("loader_show"); 
     return promise.then((function(response) { 
     $rootScope.$broadcast("loader_hide"); 
     return response; 
     }), function(response) { 
     $rootScope.$broadcast("loader_hide"); 
     $rootScope.network_error = true; 
     return $q.reject(response); 
     }); 
    }; 
    } 
]);

指令

app.directive("spinner", function() { 
    return function($scope, element, attrs) { 
    $scope.$on("loader_show", function() { 
     return element.removeClass("hide"); 
    }); 
    return $scope.$on("loader_hide", function() { 
     return element.addClass("hide"); 
    }); 
    }; 
});

來源

2013-03-11 17:06:40

奇怪，因爲它似乎，你也可以使用內嵌註釋你在哪裏做的實際.push()注入您的依賴關係$q和$window即，而不是注入一個函數on（）into $httpProvider.responseInterceptors你推一個數組：

app.config(["$httpProvider", function($httpProvider) { 
    $httpProvider.responseInterceptors.push(['$q', '$window', function($q, $window) { 
     return function(promise) { 
      return promise.then(function(response) { 
        $("#loader").hide(); 
        return response; 
       }, 
       function(response) { 
        $("#loader").hide(); 
        return $q.reject(response); 
       }); 
     }; 
    }]); 
}]);

來源

2015-06-18 09:19:33

AngularJS服務配置價值被摧毀的微小

回答

相關問題