如何添加具有功能的 Angular 材质自定义 mdToast？

Posted 2023-03-13

【中文标题】如何添加具有功能的 Angular 材质自定义 mdToast？

【英文标题】：How to add an Angular material custom mdToast with functions?

【发布时间】：2017-02-16 03:20:05

【问题描述】：

我正在使用 Material ui 框架使用 Angular 1.x 构建一个项目，我偶然发现了一个奇怪的问题，即我无法创建自定义 Toast (snackbar)。更具体地说，我无法向 Toast 上的按钮添加事件：

/// <reference path="../../_All.d.ts"/>

module MbRateDialog 
    class MbRateDialogController 
        static $inject = ['$location', '$scope', '$mdToast']

        constructor(private $location, private $scope, private $mdToast) 
        ;

        closeToast() 
          console.log('closed');
          this.$mdToast.hide();
        

        openToast() 
            this.$mdToast.show(
              hideDelay   : 0,
              position    : 'bottom left',
              autoWrap    : false,
              controller  : 'MbRateToastController',
              template    :
                  `<md-toast class="mb-rate-toast">
                      <div  class="mb-rate-toast__content">
                          <span class="mb-rate-toast__content-text">
                              Heading text
                          </span>
                          <div layout="row" layout-align="space-between center">
                              <mb-button type="primary" ng-click="this.closeToast()">Nope</mb-button>
                              <mb-button type="primary" ng-click="$ctrl.closeToast()">Yup</mb-button>
                          </div>
                      </div>
                  </md-toast>`
            );
        ;
    

    class MbRateDialogComponent implements ng.IComponentOptions 
        public controller = MbRateDialogController;
        public bindings:  [binding: string]: string  = 
            url: '='
        ;
        public transclude = true;
        public template =
            `<div flex class="mb-rate-dialog">
                <mb-button type="primary" ng-click="$ctrl.openToast()">RATING</mb-button>
            </div>`;
    
    angular.module('mbRateDialog').component('mbRateDialog', new MbRateDialogComponent());

问题是我不能让 toast 按钮使用相同的范围。起初我试图注入mdToastProvider，但它立即给了我错误，这样它就可以工作，但我不能让按钮做我想做的事。

这里是 API：https://material.angularjs.org/latest/api/service/$mdToast

我对 Angular 很陌生，因此我对不同范围的控制器设置有点困惑。提前致谢！

【问题讨论】：

“自定义用法”演示不是为您解释了吗？ material.angularjs.org/latest/demo/toast

【参考方案1】：

$mdToast.show 方法中有范围参数。只需提供所需的范围。

您可以传递当前范围或重用新创建的范围。

您可以通过childScope = $scope.$new();创建范围