The Angular Material provides various special methods to show
unobtrusive alerts to the users. Angular Material provides a term toast
for them and
am_toasts.htm
$mdToast service is used to show toasts.Example
The following example showcases the use of toasts.am_toasts.htm
<html lang="en" > <head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script language="javascript"> angular .module('firstApplication', ['ngMaterial']) .controller('toastController', toastController); function toastController ($scope, $mdToast, $document) { $scope.showToast1 = function() { $mdToast.show( $mdToast.simple() .textContent('Hello World!') .hideDelay(3000) ); }; $scope.showToast2 = function() { var toast = $mdToast.simple() .textContent('Hello World!') .action('OK') .highlightAction(false); $mdToast.show(toast).then(function(response) { if ( response == 'ok' ) { alert('You clicked \'OK\'.'); } }); } } </script> </head> <body ng-app="firstApplication"> <div id="toastContainer" ng-controller="toastController as ctrl" layout="row" ng-cloak> <md-button ng-click="showToast1()">Show Simple Alert</md-button> <md-button ng-click="showToast2()">Show Alert with callback</md-button> </div> </body> </html>
No comments:
Post a Comment