Angular Material $mdDialog自定义配置：如何传标题与内容到模板？

你之前踩的坑其实很典型：当你用$mdDialog.confirm()的时候，里面的title、textContent是给Material自带的默认确认框模板用的——一旦你指定了自定义template，这些参数就不会自动传递到你的模板里了，得手动把数据传进去才行。下面给你两种实用的解决方案：

方案一：用locals+Controller传参（推荐） #

这种方式更符合Angular的组件化思想，把数据和逻辑封装在Controller里，避免作用域污染：

genericYNCConfirmationWithCallback: function (title, textContent, callback, cancelCallBack) {
  showAlert();

  function showAlert() {
    $mdDialog.show({
      // 自定义模板，直接用插值语法渲染数据
      template: `
        <md-dialog>
          <md-dialog-content>
            <h2 class="md-dialog-title">{{ dialogData.title }}</h2>
            <p class="md-dialog-content">{{ dialogData.textContent }}</p>
          </md-dialog-content>
          <md-dialog-actions>
            <button class="md-raised-button md-primary" ng-click="confirm()">确认</button>
            <button class="md-raised-button" ng-click="cancel()">取消</button>
          </md-dialog-actions>
        </md-dialog>
      `,
      // 对话框专属Controller，接收传递的参数
      controller: function($scope, $mdDialog, dialogData) {
        // 把传入的数据绑定到作用域，供模板使用
        $scope.dialogData = dialogData;

        // 确认按钮逻辑
        $scope.confirm = function() {
          $mdDialog.hide();
          callback();
        };

        // 取消按钮逻辑
        $scope.cancel = function() {
          $mdDialog.cancel();
          cancelCallBack();
        };
      },
      // 要传递给Controller的参数，打包成对象更清晰
      locals: {
        dialogData: {
          title: title,
          textContent: textContent
        }
      },
      // 可选：用controllerAs语法，避免$scope嵌套（如果习惯这种写法）
      // controllerAs: 'vm',
      // bindToController: true
    });
  }
}

关键说明： #

• 我们把title和textContent打包成dialogData对象，通过locals传递给对话框的Controller
• 在Controller里接收dialogData并绑定到作用域，模板里就能用{{ dialogData.title }}直接渲染了
• 自定义模板需要完整写好对话框的结构（标题、内容、按钮），默认的confirm参数不再生效

方案二：直接绑定到对话框隔离作用域 #

如果你的项目是老版本Angular，或者不想单独写Controller，也可以直接把参数赋值给对话框的隔离作用域：

genericYNCConfirmationWithCallback: function (title, textContent, callback, cancelCallBack) {
  showAlert();

  function showAlert() {
    $mdDialog.show({
      template: `
        <md-dialog>
          <md-dialog-content>
            <h2 class="md-dialog-title">{{ title }}</h2>
            <p class="md-dialog-content">{{ textContent }}</p>
          </md-dialog-content>
          <md-dialog-actions>
            <button ng-click="confirm()">确认</button>
            <button ng-click="cancel()">取消</button>
          </md-dialog-actions>
        </md-dialog>
      `,
      // 创建一个隔离作用域，避免污染父作用域
      scope: $scope.$new(),
      controller: function($scope, $mdDialog) {
        // 直接把参数赋值给对话框的作用域
        $scope.title = title;
        $scope.textContent = textContent;

        $scope.confirm = function() {
          $mdDialog.hide();
          callback();
        };

        $scope.cancel = function() {
          $mdDialog.cancel();
          cancelCallBack();
        };
      }
    });
  }
}

注意事项： #

• 一定要用$scope.$new()创建隔离作用域，不然会修改父作用域的变量，引发意外问题
• 模板里直接用{{ title }}就能拿到传递的值

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