Currently, I am working on a project using Angular 1.x and the Material UI framework. While building, I encountered an unusual issue where I am unable to create a custom Toast (snackbar) with functioning buttons:
/// <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());
}
The main issue I am facing is that the toast buttons are not utilizing the same scope. Initially, I attempted to inject mdToastProvider, however, it resulted in errors. Although the current method works, I am struggling to make the buttons function as intended.
For reference, here is the API documentation for $mdToast: https://material.angularjs.org/latest/api/service/$mdToast
As I am relatively new to Angular, I find myself a bit perplexed by the setup involving controllers for different scopes. Any guidance on this matter would be greatly appreciated. Thank you in advance!