角度材料-ダイアログ

Angular Directiveの md-dialog はコンテナ要素であり、ダイアログボックスを表示するために使用されます。その要素である md-dialog-content にはダイアログのコンテンツが含まれ、 md-dialog-actions がダイアログアクションを担当します。

Angular Serviceである mdDialog は、アプリケーション上にダイアログを開き、ユーザーに情報を通知し、意思決定を支援します。

次の例は、md-dialogディレクティブとmdDialogサービスの使用、および角型ダイアログボックスの使用を示しています。

*_am_dialog_*

<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>
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('dialogController', dialogController);

         function dialogController ($scope, $mdDialog) {
            $scope.status = '';
            $scope.items = [1,2,3,4,5];
            $scope.showAlert = function(ev) {
               $mdDialog.show (
                  $mdDialog.alert()
                     .parent(angular.element(document.querySelector('#dialogContainer')))
                     .clickOutsideToClose(true)
                     .title('finddevguides.com')
                     .textContent('Welcome to finddevguides.com')
                     .ariaLabel('Welcome to finddevguides.com')
                     .ok('Ok!')
                     .targetEvent(ev)
               );
            };

            $scope.showConfirm = function(event) {
               var confirm = $mdDialog.confirm()
                  .title('Are you sure to delete the record?')
                  .textContent('Record will be deleted permanently.')
                  .ariaLabel('finddevguides.com')
                  .targetEvent(event)
                  .ok('Yes')
                  .cancel('No');
               $mdDialog.show(confirm).then(function() {
                  $scope.status = 'Record deleted successfully!';
               }, function() {
                  $scope.status = 'You decided to keep your record.';
               });
            };

            $scope.showCustom = function(event) {
               $mdDialog.show ({
                  clickOutsideToClose: true,
                  scope: $scope,
                  preserveScope: true,
                  template: '<md-dialog>' +
                     ' <md-dialog-content>' +
                     ' Welcome to finddevguides.com' +
                     ' </md-dialog-content>' +
                     ' </md-dialog>',
                  controller: function DialogController($scope, $mdDialog) {
                     $scope.closeDialog = function() {
                        $mdDialog.hide();
                     }
                  }
               });
            };
         }
      </script>
   </head>

   <body ng-app = "firstApplication">
      <div id = "dialogContainer" ng-controller = "dialogController as ctrl"
         layout = "row" ng-cloak>
         <md-content>
            <h4>Standard Alert</h4>
            <md-button class = "md-primary md-raised"
               ng-click = "showAlert($event)" flex = "100"  flex-gt-md = "auto">
               Alert
            </md-button>

            <h4>Confirm Dialog Box</h4>
            <md-button class = "md-primary md-raised" ng-click = "showConfirm($event)"
               flex = "100"  flex-gt-md = "auto">
               Confirm
            </md-button>

            <h4>Custom Dialog Box</h4>
            <md-button class = "md-primary md-raised" ng-click = "showCustom($event)"
               flex = "100"  flex-gt-md = "auto">
               Custom
            </md-button>

            <div ng-if = "status">
               <br/>
               <b layout = "row" layout-align = "center center" class = "md-padding">
                  {{status}}
               </b>
            </div>

         </md-content>
      </div>
   </body>
</html>

結果

結果を確認します。

Angular-material-dialogs

角度材料-ダイアログ

結果