2013-11-20 26 views
3

我有一個應用程序,使用我創建的各種服務進行http調用。當服務器請求失敗或者當api返回錯誤屬性時,我想在頁面頂部顯示這些錯誤。在angular.js應用程序中進行全局錯誤處理的最佳方式是什麼?

我的角度文檔可以最好地顯示的錯誤這種方式,這使得在明白事理:

<div ng-controller="AlertDemoCtrl"> 
    <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert> 
</div> 

而在AlertDemoCtrl:

$scope.addAlert = function() { 
    $scope.alerts.push({msg: "Another alert!"}); 
    }; 

    $scope.closeAlert = function(index) { 
    $scope.alerts.splice(index, 1); 
    }; 

的事情是,我不知道如何將錯誤推送到AlertDemoCtrl中的警報,因爲http請求發生在我無法訪問AlertDemoCtrl的服務中。我是否需要廣播事件才能將它們添加到AlertDemoCtrl中,或者是否有將控制器注入服務的方法?或者我需要將addAlert函數添加到$ rootScope中?

感謝任何意見,謝謝!

回答

10

我已經實現這一點的方式是用一個messageService暴露如下界面:

{ 
    messages:  /* an array of all messages */, 
    addMessage: /* function(severity, text) */, 
    removeMessage: /* function(messageObject) */, 
    // other stuff, irrelevant to current topic 
} 

每個消息對象都有一個文本中,「嚴重性」(錯誤,警告等)和一個刪除方法。我還添加了一個消息選項,以超時並自動刪除。

任何需要添加消息的控制器都使用messageService。消息控制器將服務的messages屬性公開給它的作用域,並將它的模板ng-repeat公開(我想在頁面的頂部顯示消息)。使用自助風格:

<div id="messageContainer" ng-controller="messages"> 
    <div alert 
     ng-repeat="msg in messages" 
     type="msg.severity" 
     close="closeMsg($index)" 
    > 
     {{msg.text}} 
    </div> 
</div> 

而且控制器:

app.controller("messages", ["$scope", "messageService"], 
function($scope, messageService) { 
    $scope.messages = messageService.messages, 
    $scope.closeMsg = function(index) { 
     $scope.messages[index].remove(); 
    }; 
}); 

現在,如果一個服務需要增加的消息,它可以與messageService互動。我寧願沒有與UI交互的服務;我認爲服務返回消息列表並讓控制器按照自己的意願處理它們會更好。

+0

感謝您的回覆,看起來像一個很好的解決方案給我!現在就試試吧! – Dine

+0

就像一個魅力。謝謝 :) – Dine

相關問題