AngularJS：基本錯誤處理

Question

我想通過顯示/隱藏成功/錯誤html元素和錯誤描述來反映發佈請求狀態。我有以下控制器使用$http服務：

$ctrl.addCorporateTransport = function() { 
    var postStatusBar = angular.element('postStatusBar'); 
    $http.post('/post_corporate_transport', $ctrl.corporateTransport) 
     .success(function() { 
      // throw success alert 
     }) 
     .error(function (error) { 
       // throw error alert 
     }); 
}; 

我正在尋找有可能拋出<div class="alert"><p>my error here</p>如果我打錯誤回調。

我嘗試這樣做：

var statusBar = angular.element('postStatusBar'); 
//... 
.success(function() { 
    statusBar.setClass("alert-success") 
}) 
.error(function (error) { 
    statusBar.setClass("alert-danger"); 
    statusBar.setParameter("text", error); 
}); 

不過，這並不明顯工作，看起來像反模式。做這件事最好的解決方案是什麼？

Answer 1

如果警報成分是比你需要做一個警示指令，並用廣播通知和知名度一樣更新屬性之外的控制範圍。

否則你可以從控制器綁定類似性質：

<div ng-controller="AwesomeController as AwesomeCtrl"> 
      <div class="alert" ng-show="AwesomeCtrl.show.error">.... 
      <div class="alert" ng-show="AwesomeCtrl.show.success">.... 
      <div class="alert" ng-class="{ 'succes' : AwesomeCtrl.show.success }">.... 

在這裏輸入的代碼

angular 
    .module('app') 
    .controller('AwesomeController', controller); 

controller.$inject = ['$http']; 

function controller($http) { 
    var vm = this; 
    vm.corporateTransport = {}; 
    vm.show = { 
     error = false; 
     success = false; 
    } 

    vm.oneCoolMethod = addCorporateTransport; 

    // test 
    addCorporateTransport(); 


    function addCorporateTransport() { 
     $http.post('/post_corporate_transport', vm.corporateTransport) 
      .success(onTransportSuccess) 
      .error(onTransportError); 
    }; 

    function onTransportSuccess(result) { 
     toggleAlert('success'); 

    } 

    function onTransportError(result) { 
     toggleAlert('error'); 

    } 

    function toggleAlert(level) { 
     angular.forEach(vm.show, function(value, key) { 
      vm.show[key] = false; 
     }); 
     vm.show[level] = true; 
    } 

Answer 2

在第一必須使用$ scope.statusBar 也addClass除了setClass