AngularJS Material Toast模板中控制器变量值未更新问题排查

我之前也踩过AngularJS Material Toast自定义模板的坑，结合你描述的情况，咱们一步步来排查解决核心问题：

1. 先搞清楚Toast的作用域逻辑 #

AngularJS Material的Toast默认会创建独立作用域，如果你直接在自定义模板里绑定外部控制器的变量，很容易出现“单向绑定”或者变量不更新的情况。解决思路有两种：

方案A：给Toast预设指定专属控制器 #

在你的预设里明确绑定控制器，把变量的更新逻辑封装在Toast自己的控制器中，避免作用域冲突：

$mdToastProvider.addPreset('docEditPreset', {
  options: function () {
    return {
      templateUrl: 'App/Components/Document_Edit/DocumentEditToast.html',
      hideDelay: 5000, // 建议给个合理的延迟值
      controller: 'DocumentEditToastCtrl',
      controllerAs: 'toastCtrl' // 用controllerAs避免$scope混淆
    };
  }
});

然后创建对应的Toast控制器：

angular.module('yourApp').controller('DocumentEditToastCtrl', function() {
  // 初始化变量
  this.toastMessage = '文档编辑中...';

  // 提供更新变量的方法
  this.updateMessage = function(newMsg) {
    this.toastMessage = newMsg;
  };
});

模板里用controllerAs的方式绑定变量：

<div class="md-toast-content">
  <p>{{toastCtrl.toastMessage}}</p>
  <!-- 关于md-actions：文档确实有滞后，直接用md-button即可，不用纠结类名 -->
  <md-button ng-click="toastCtrl.updateMessage('编辑完成！')">更新状态</md-button>
</div>

方案B：通过locals传递引用类型变量 #

如果你需要和父控制器共享状态，一定要用**引用类型（对象/数组）**传递，避免基本类型的值传递导致的更新失效：

// 在父控制器中定义引用类型变量
$scope.toastState = {
  status: '初始状态'
};

// 调用Toast时传递locals
$mdToast.show(
  $mdToast.docEditPreset()
    .locals({ toastState: $scope.toastState })
);

然后在Toast控制器中注入这个变量：

controller: function(toastState) {
  this.state = toastState;
}

模板里绑定对象属性：

<p>{{toastCtrl.state.status}}</p>

这样你在父控制器中修改$scope.toastState.status时，Toast模板里的内容会实时更新。

2. 额外注意点 #

• 不要直接在Toast预设里绑定父控制器的$scope，独立作用域是Material组件的设计规范，强行穿透容易引发其他问题；
• 关于文档里的md-actions类：确实存在表述模糊的情况，实际开发中只要把按钮放在md-toast-content内，用AngularJS Material的布局指令（比如layout="row"）调整位置即可，不用严格遵循文档里的类名要求；
• 如果是异步更新变量，确保你是在AngularJS的消化周期内操作的（比如用$apply或者$timeout包裹更新逻辑）。

内容的提问来源于stack exchange，提问作者Purya.A