修改

Question

管理用AngularJS重写我的项目，除了合理的后端错误处理。

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

在JQuery中，我会做以下事情：

在Ajax设置

我确保后端在标题“display-messages”上发送错误，其中每个键与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调用上的错误处理程序 - 再次导致代码重复。

目前我被困住了。我需要有关如何进行的指导？

修改

我讨厌回答自己的问题。

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

Answer 1

我现在的丑陋但合理的解决方案如下：

即使拦截器无法访问“$ scope” - 他们也可以访问“$ 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.formErrors，如此

<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>

现在剩下的就是解决如何实现“popover” - 我确信某些地方存在某种东西。

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

AngularJS报告后端错误

修改

1 个答案: