demo(list): use md-dialog for alerts

angular · Apr 16, 2015 · e0d9831 · e0d9831
1 parent a5d09af
commit e0d9831
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 11 deletions.
diff --git a/src/components/list/demoListControls/index.html b/src/components/list/demoListControls/index.html
@@ -6,12 +6,12 @@
   </md-list-item>
   <md-divider></md-divider>
   <md-subheader class="md-no-sticky">Clickable Items with Secondary Controls</md-subheader>
-  <md-list-item ng-click="navigateTo(setting.extraScreen)" ng-repeat="setting in settings">
+  <md-list-item ng-click="navigateTo(setting.extraScreen, $event)" ng-repeat="setting in settings">
     <md-icon md-svg-icon="{{setting.icon}}"></md-icon>
     <p> {{ setting.name }} </p>
     <md-switch class="md-secondary" ng-model="setting.enabled"></md-switch>
   </md-list-item>
-  <md-list-item ng-click="navigateTo('data usage')">
+  <md-list-item ng-click="navigateTo('data usage', $event)">
     <md-icon md-svg-icon="cached"></md-icon>
     <p>Data Usage</p>
   </md-list-item>
@@ -20,13 +20,13 @@
   <md-list-item ng-repeat="message in messages">
     <md-checkbox ng-model="message.selected"></md-checkbox>
     <p>{{message.title}}</p>
-    <md-icon class="md-secondary" ng-click="doSecondaryAction()" aria-label="Chat" md-svg-icon="communication:message"></md-icon>
+    <md-icon class="md-secondary" ng-click="doSecondaryAction($event)" aria-label="Chat" md-svg-icon="communication:message"></md-icon>
   </md-list-item>
   <md-divider></md-divider>
   <md-subheader class="md-no-sticky">Avatar with Secondary Action Icon</md-subheader>
-  <md-list-item ng-repeat="person in people" ng-click="goToPerson(person.name)">
+  <md-list-item ng-repeat="person in people" ng-click="goToPerson(person.name, $event)">
     <img alt="{{ person.name }}" ng-src="{{ person.img }}" class="md-avatar" />
     <p>{{ person.name }}</p>
-    <md-icon md-svg-icon="communication:messenger" ng-click="doSecondaryAction()" aria-label="Open Chat" class="md-secondary md-hue-3" ng-class="{'md-primary': person.newMessage}"></md-icon>
+    <md-icon md-svg-icon="communication:messenger" ng-click="doSecondaryAction($event)" aria-label="Open Chat" class="md-secondary md-hue-3" ng-class="{'md-primary': person.newMessage}"></md-icon>
   </md-list-item>
 </md-list>
diff --git a/src/components/list/demoListControls/script.js b/src/components/list/demoListControls/script.js
@@ -6,7 +6,7 @@ angular.module('listDemo2', ['ngMaterial'])
     .iconSet('communication', 'img/icons/sets/communication-icons.svg', 24)
     .defaultIconSet('img/icons/sets/core-icons.svg', 24);
 })
-.controller('ListCtrl', function($scope) {
+.controller('ListCtrl', function($scope, $mdDialog) {
   $scope.toppings = [
     { name: 'Pepperoni', wanted: true },
     { name: 'Sausage', wanted: false },
@@ -31,16 +31,37 @@ angular.module('listDemo2', ['ngMaterial'])
     { name: 'Peter Carlsson', img: 'img/100-2.jpeg', newMessage: false }
   ];
 
-  $scope.goToPerson = function(person) {
-    alert('Inspect ' + person);
+  $scope.goToPerson = function(person, event) {
+    $mdDialog.show(
+      $mdDialog.alert()
+        .title('Navigating')
+        .content('Inspect ' + person)
+        .ariaLabel('Person inspect demo')
+        .ok('Neat!')
+        .targetEvent(event)
+    );
   };
 
-  $scope.navigateTo = function(to) {
-    alert('Imagine being taken to ' + to);
+  $scope.navigateTo = function(to, event) {
+    $mdDialog.show(
+      $mdDialog.alert()
+        .title('Navigating')
+        .content('Imagine being taken to ' + to)
+        .ariaLabel('Navigation demo')
+        .ok('Neat!')
+        .targetEvent(event)
+    );
   };
 
   $scope.doSecondaryAction = function() {
-    alert('Seconday action clicked');
+    $mdDialog.show(
+      $mdDialog.alert()
+        .title('Secondary Action')
+        .content('Secondary actions can be used for one click actions')
+        .ariaLabel('Secondary click demo')
+        .ok('Neat!')
+        .targetEvent(event)
+    );
   };
 
 });