Question

我正在使用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很新，因此对于不同范围的控制器设置我有点困惑。提前谢谢！

Answer 1

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

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

您可以通过childScope = $scope.$new();

创建范围

如何使用函数添加Angular材质自定义mdToast？

1 个答案: