Angular Material Sample

Using the angular material library

by Bruno Sabetta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-animate.js"></script>
<div ng-app='home' ng-controller="MainCtrl as vm">
  <md-button ng-click="openBottomSheet()">
    Open a Bottom Sheet!
  </md-button>
</div>

JavaScript

var app = angular.module('home', [
  'ngMaterial',
  'ngAria',
  'ngAnimate',
]);

app.controller('MainCtrl', function($scope, $mdBottomSheet) {
  $scope.openBottomSheet = function() {
    $mdBottomSheet.show({
      controller: 'BottomSheet',
      template: 
      '<md-bottom-sheet>' + 
      	'Hello!' + 
      	'<md-button ng-click= "openSecondBottomSheet()">' + 
      		'Open Second Bottom Sheet!' + 
      	'</md-button>' + 
      '</md-bottom-sheet> '
    });
  };
});

app.controller('BottomSheet', function($scope, $mdBottomSheet) {
  $scope.openSecondBottomSheet = function() {
    $mdBottomSheet.show({
    controller: 'SecondBottomSheet',
    template: '<md-bottom-sheet>Hello Second!</md-bottom-sheet>'
  });
 };
});

app.controller('SecondBottomSheet', function($scope) {
  //alert("second bottom sheet ctrl");
});