2013-04-22 57 views
1

除了合理的后端错误处理外,还管理用AngularJS重写我的项目。AngularJS报告后端错误

我只希望有一种通用的方法来捕获Ajax错误响应并相应地修改范围。

jQuery中,我将做到以下几点:

  1. 设置一个元素(可以称之为ajaxRoot)关于Ajax设置
  2. 我会确保在后台发送的报头“显示错误消息“每个键与ajaxRoot下的元素名称匹配。例如

    <div id="myAjaxSection"> 
        <span class="view-port"> 
          <input name="username"/> 
        </span> 
    </div> 
    
    $.ajax({ 
        ajaxRoot : $("#myAjaxSection"), 
        ... 
    }); 
    
  3. 使用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类似的东西。这是我迄今为止所尝试的

  1. http拦截器 - 但我无法访问范围。
  2. http拦截器+发布/订阅事件 - 需要在每个控制器中重复代码。
  3. $ http调用的错误处理程序 - 再次导致代码重复。

目前我卡住了。 我需要指导如何继续?

编辑

我讨厌回答我自己的问题。

我现在有一个丑陋但合理的解决方案。希望能有更多关于这个话题的答案。

回答

2

现在我的丑又合理的解决方案如下:

即使拦截器无法访问“$范围” - 他们可以访问“$ 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> 

现在剩下的就是解决如何实现“弹出窗口” - 我确定某处存在什么东西。

我讨厌这个解决方案..感觉不对..如果有人有什么更好的建议 - 请做。