解決方法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異常

回答

相關問題