2016-12-14 5 views
1

エラーの説明とともに、成功/エラーhtml要素を表示/非表示して、投稿のリクエストステータスを反映したいと考えています。私は、エラーコールバックをヒットした場合<div class="alert"><p>my error here</p>をスローする可能性を持つために探していますAngularJS:基本的なエラー処理

$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 
     }); 
}; 

:私は$httpサービスを利用して、コントローラを次のようしています。

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

しかし、それは明らかに動作し、アンチパターンのように見えるしません:

は、私はこれを試してみました。何をするための最良の解決策は何ですか?警告コンポーネントがアラートにディレクティブを作成し、可視性などの性質を通知し、更新するためにブロードキャストを使用して必要以上に外コントローラの範囲であれば最初のあなたはsetClass

+1

を入力します。 –

答えて

2

以外にもaddClassを$ scope.statusBar を使用しなければなりませんで

2

。あなたのようなコントローラーからプロパティをバインドすることができ、他の

:あなたが回答で、いくつかのスコープの変数を設定することにより、NG-ショーのために行くいけない理由

<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; 
    } 
関連する問題