除了合理的後端錯誤處理外，還管理用AngularJS重寫我的項目。AngularJS報告後端錯誤

我只希望有一種通用的方法來捕獲Ajax錯誤響應並相應地修改範圍。

jQuery中，我將做到以下幾點：

設置一個元素（可以稱之爲ajaxRoot）關於Ajax設置

我會確保在後臺發送的報頭「顯示錯誤消息「每個鍵與ajaxRoot下的元素名稱匹配。例如

<div id="myAjaxSection"> 
    <span class="view-port"> 
      <input name="username"/> 
    </span> 
</div> 

$.ajax({ 
    ajaxRoot : $("#myAjaxSection"), 
    ... 
});

使用ajaxError捕捉所有的Ajax錯誤，看起來像

if (ajaxSettings.ajaxRoot && jqXHR.getResponseHeader("display-messages")){ 
    var msgs = JSON.parse(jqXHR.getResponseHeader("display-message")); 
    var $ajaxRoot = ajaxSettings.ajaxRoot; 
    var k; 
    for (k in msgs){ 
     $ajaxRoot.find("[name=" + k + "]").closest(".view-port").addClass("error").popover({content: msgs[k]}); 
    } 
}

這將輕鬆打理所有錯誤的假設，我決定在約定的任何頁面上。

現在我試圖達到與AngularJS類似的東西。這是我迄今爲止所嘗試的

http攔截器 - 但我無法訪問範圍。
http攔截器+發佈/訂閱事件 - 需要在每個控制器中重複代碼。
$ http調用的錯誤處理程序 - 再次導致代碼重複。

目前我卡住了。我需要指導如何繼續？

編輯

我討厭回答我自己的問題。

我現在有一個醜陋但合理的解決方案。希望能有更多關於這個話題的答案。

來源

2013-04-22 guy mograbi

現在我的醜又合理的解決方案如下：

即使攔截器無法訪問「$範圍」 - 他們可以訪問「$ rootScope」。

注 - 當我調試攔截並試圖評估「$ rootScope」我得到了一個「沒有這樣的引用」錯誤..這是奇怪的。一旦我使用「console.log」打印它，它運行良好。

下我的應用程序的配置，我會做

$httpProvider.responseInterceptors.push('myInterceptor');

然後我定義我的攔截如下

MyApp.factory('myInterceptor', function ($rootScope, $q, $window) 
{ 
    function success(response) 
    { 
     $rootScope.formErrors = {}; 
     return response; 
    } 

    function error(response) 
    { 
     var status = response.status; 
     if (status == 401) { 
      window.location = "/"; 
      return; 
     } 

     var hdrs = response.headers(); 
     if (hdrs["display-message"]){ 
      var displayMessages = JSON.parse(hdrs["display-message"]); 
      if (displayMessages["formErrors"]){ 
       $rootScope.formErrors = displayMessages["formErrors"]; 
      } 
     } 
     console.log(["hdrs",hdrs]); 
     // otherwise 
     return $q.reject(response); 
    } 

    return function (promise) 
    { 
     return promise.then(success, error); 
    }; 
});

現在所有這剩下的就是引用rootScope。從模板錯誤如此

<div id="myAjaxSection"> 
    <span class="view-port" ng-class="{'error':formErrors['username'] != null}"> 
      <input name="username"/> 
    </span> 
</div>

哪一個 - 感謝模板是可行的沒有太多的代碼重複。

<div id="myAjaxSection"> 
    <span class="view-port" ng-class="{'error':formErrors['@name'] != null}"> 
      <input name="@name"/> 
    </span> 
</div>

現在剩下的就是解決如何實現「彈出窗口」 - 我確定某處存在什麼東西。

我討厭這個解決方案..感覺不對..如果有人有什麼更好的建議 - 請做。

來源

2013-04-22 11:20:49

AngularJS報告後端錯誤

編輯

回答

相關問題