解决方法AngularJS DOM异常

角度似乎被Chrome浏览器（可能还有其他浏览器）的“打开”状态绊住了，而在复制阶段的$ digest阶段出现XMLHttpRequest。当访问XMLHttpRequest.status字段时，会引发异常。我的实际用例不绑定到状态字段; XMLHttpRequest对象只是我观察数组中另一个对象的一个成员。解决方法AngularJS DOM异常

所以，

a）应角度约为这种情况下，聪明和忽略异常？
b）有没有办法让Angular在消解包含对象时忽略字段或对象？
c）其他解决方法建议？

下面是一个例子。这个HTML +的Javascript（JSFiddle）：

<div ng-app ng-controller="TestCtrl"> 
    <h2>XMLHttpRequest.status: {{ xhr.status }}</h2> 
</div> 

function TestCtrl($scope) { 
    $scope.xhr = new XMLHttpRequest(); 
    $scope.xhr.open('POST', 'http://localhost:8000/api/medias', true); 
}

导致此错误：

Error: INVALID_STATE_ERR: DOM Exception 11 
Error: An attempt was made to use an object that is not, or is no longer, usable. 
at eval (eval at Jb (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js:74:389), <anonymous>:16:4) 
at d.fn.x.assign (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js:63:120) 
at Object.j (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js:52:126) 
at Object.e.$digest (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js:84:286) 
at Object.e.$apply (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js:86:469) 
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js:15:396 
at Object.d [as invoke] (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js:26:401) 
at pb (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js:15:317) 
at jc (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js:15:178) 
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js:159:424 angular.min.js:60

来源

2013-02-08 darrinm

您需要使用$http服务。（实施例99％从角文档例如抬起）

控制器：

function TestCtrl($http, $scope) { 
    $scope.xhr = {status : undefined}; 

    $http.post('http://localhost:8000/api/medias', {params:{'go':'here'}}) 
    .success(function(data, status) { 
     $scope.xhr.status = status; 
    }) 
    .error(function(data, status) { 
     $scope.xhr.status = status; 
    }); 
}

EDIT（未测试）：控制器使用的XMLHttpRequest： 使用event listeners调用$apply

function TestCtrl($http, $scope) { 
    $scope.xhr = {status : undefined}; 

    var xhr = new XMLHttpRequest(); 

    xhr.addEventListener('progress', function(event) { 
    var progress = event['something']//get what you need from the event.. 
     $scope.$apply(function() { 
     $scope.xhr.progress = progress; 
     }); 
    }, false); 

    xhr.open('POST', 'http://localhost:8000/api/medias', true); 
}

模板：

<div ng-app ng-controller="TestCtrl"> 
    <h2>XMLHttpRequest.status: {{ xhr.status }}</h2> 
    <h2>XMLHttpRequest.status: {{ xhr.progress}}</h2> 
</div>

例子：

plnkr（用GET）

来源

2013-02-08 22:31:10

感谢这是我第一次尝试，但我需要从我的请求（这是一个上传）$ http没有提供进度事件。 – darrinm 2013-02-08 23:06:23

查看我的更新回答 – 2013-02-08 23:49:47

再次感谢。不幸的是，正如我的问题所述，我的实际案例比这里的示例代码更复杂。我有一个对象数组，每个对象都有几个属性，其中一个是XMLHttpRequest对象。我引用了XMLHttpRequest，所以我不仅可以获得它的状态，而且可以调用，例如放弃（）在它上面。随着更多状态和功能从XMLHttpRequest桥接到可监视对象，您要走的方向会增加复杂性。我更喜欢一个通用的解决方案，以便能够安全地在对象中包含对XMLHttpRequest的引用。 – darrinm 2013-02-09 01:25:41

部分B的我的问题：

b) Is there a way to have Angular ignore fields or objects when it is digesting containing objects?

答案是肯定的，包裹场/对象与功能，例如：

$scope.getXhr = function() { return xhr; }

和角度时$消化会忽略它。当然这假定你想/需要它被忽略。对该字段/对象的更改不会触发观察者。

来源

2013-02-20 22:44:05 darrinm

解决方法AngularJS DOM异常

回答

相关问题