AngularJS:基本的错误处理

时间:2016-12-14 13:01:44

标签: javascript angularjs ajax error-handling

我想通过显示/隐藏带有错误描述的成功/错误html元素来反映发布请求状态。我使用switchMenuValue (String spinnerValue,Activity act) { switch(spinnerValue) { case "Home": //Intent homeIntent = new Intent(act, MainActivity.class); //act.startActivity(homeIntent); Log.d("CASE", "Home"); break; case "Festival": Intent festivalIntent = new Intent(act, Festival.class); act.startActivity(festivalIntent); Log.d("CASE", "Festival"); break; } } 服务跟随控制器:

$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>

但它显然不起作用,看起来像反模式。做这件事的最佳解决方案是什么?

2 个答案:

答案 0 :(得分:2)

首先你必须使用$ scope.statusBar 以及除了setClass

之外的addClass

答案 1 :(得分:2)

如果警报组件超出控制器范围,则需要将警报作为指令,并使用广播来通知和更新可见性等属性。

否则你可以绑定来自控制器的属性,如:

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