AngularJS中重定向后如何显示临时提示消息？

这个需求我之前在AngularJS 1.x项目里碰过，核心痛点就是路由跳转后控制器会重新实例化，局部变量存的消息直接就没了。结合你用的Bootstrap 3，给你一套完整的实现方案：

1. 先搞一个全局消息服务 #

这个服务用来存储提示消息的内容、类型，还有显示状态——因为服务是单例的，路由切换也不会销毁，刚好能存跨路由的临时消息：

angular.module('yourApp').service('messageService', function() {
  var message = {
    content: '',
    type: 'success', // 默认成功类型，可选danger/warning/info
    show: false
  };

  this.setMessage = function(content, type) {
    message.content = content;
    message.type = type || 'success';
    message.show = true;
  };

  this.getMessage = function() {
    return message;
  };

  this.clearMessage = function() {
    message.content = '';
    message.show = false;
  };
});

2. 在触发重定向的控制器里设置消息 #

比如你保存用户的控制器，API调用成功后先把消息存入服务，再跳转：

angular.module('yourApp').controller('SaveCustomerCtrl', function($location, $http, messageService) {
  this.saveCustomer = function() {
    $http.post('/api/customers', this.customerData)
      .then(function(response) {
        // 把API返回的用户名拼进提示语
        var successMsg = `用户${response.data.XYZ}保存成功`;
        // 存入消息服务
        messageService.setMessage(successMsg, 'success');
        // 执行重定向
        $location.path("/customerList");
      })
      .catch(function(err) {
        // 失败也可以存错误消息
        messageService.setMessage('保存失败：' + err.data.message, 'danger');
      });
  };
});

3. 在目标页面（customerList）的控制器里处理消息 #

注入消息服务，获取消息后显示，同时设置自动隐藏的超时（和你原来不重定向时的时长保持一致，比如3秒）：

angular.module('yourApp').controller('CustomerListCtrl', function($timeout, messageService) {
  var vm = this;
  vm.message = messageService.getMessage();

  // 如果有消息，自动隐藏
  if (vm.message.show) {
    var hideTimeout = $timeout(function() {
      messageService.clearMessage();
    }, 3000); // 这里的3000就是你要的显示时长，按需调整

    // 控制器销毁时清除超时，防止内存泄漏
    this.$onDestroy = function() {
      $timeout.cancel(hideTimeout);
    };
  }
});

4. 在customerList的HTML里加Bootstrap提示框 #

用ng-show控制显示，ng-class根据消息类型加载对应的Bootstrap样式：

<!-- 放在页面顶部合适的位置，比如导航栏下面 -->
<div class="alert alert-dismissible" 
     ng-class="'alert-' + customerListCtrl.message.type"
     ng-show="customerListCtrl.message.show">
  <button type="button" class="close" ng-click="messageService.clearMessage()">&times;</button>
  {{ customerListCtrl.message.content }}
</div>

额外小细节 #

• 如果用户手动点击关闭按钮，也要调用messageService.clearMessage()清空消息
• 可以给服务加个默认时长配置，不用在每个控制器里写死超时时间
• 要是你原来的非重定向场景也用这个服务，就能统一提示逻辑，不用重复写代码

内容的提问来源于stack exchange，提问作者Judy007