Wie fügt man ein Angular-Material benutzerdefinierte mdToast mit Funktionen?

Question

Ich baue ein Projekt mit Angular 1.x mit Material ui framework und stolperte über ein seltsames Problem, wo ich keinen benutzerdefinierten Toast (Snackbar) erstellen kann. Genauer gesagt kann ich nicht Ereignisse Tasten auf dem Toast hinzufügen:

/// <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()); 
} 

Das Problem ist, dass ich nicht die Toast Tasten den gleichen Umfang nutzen machen. Zuerst habe ich versucht, mdToastProvider zu injizieren, aber es gab mir sofort Fehler, so funktioniert es, aber ich kann nicht die Tasten tun, was ich will.

ist hier API für diese: https://material.angularjs.org/latest/api/service/ $ mdToast

ich ziemlich neu bin Angular, also bin ich ein wenig verwirrt Setup den Controller für verschiedene Rahmen. Danke im Voraus!

Answer 1

In der $ mdToast.show-Methode gibt es einen Bereichsparameter. Geben Sie nur den gewünschten Umfang an.

Sie können den aktuellen Bereich übergeben oder den neu erstellten Bereich erneut verwenden.

können Sie Bereich erstellen über childScope = $scope.$new();