AngularJS : 기본 오류 처리

Question

오류 설명과 함께 성공/오류 html 요소를 표시하거나 숨김으로써 게시 요청 상태를 반영하고 싶습니다. 나는 $http 서비스의 이용과 컨트롤러를 다음과 같은 한 : 나는 오류 콜백을 치면 가능성이 <div class="alert"><p>my error here</p>가 발생하는 것을 찾고 있어요

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

.

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

그러나 그것은 분명히 작동 및 안티 패턴처럼 보이는하지 않습니다

나는이 시도. 무엇을하기위한 최선의 해결책은 무엇입니까? setClass 제외

Answer 1

경고 구성 요소는 경고 지시문하고 알리기 위해 브로드 캐스트를 사용하여 가시성과 같은 업데이트 속성 필요한 것보다 외부 컨트롤러 범위 인 경우 . 이 같은 컨트롤러의 속성을 바인딩 할 수 있습니다 다른

: 당신이 응답의 일부 범위 변수를 설정하여 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; 
    } 

Answer 2

처음 사용합니다 $ scope.statusBar 에서

또한 addClass