如何包含AngularJS的標籤

Question

我一直在閱讀this docs，我可以在AngularJS中看到Modal Dialog Window。然而，我無法弄清楚如何將md-button標籤：
的代碼片段，我得到的是：

<md-button class="md-primary md-raised edgePadding" ng-click="openFromLeft()" > 
     Open From Left - Close To Right 
     </md-button> 
<md-button class="md-primary md-raised edgePadding" ng-click="openOffscreen()" > 

我試着看的方式它是如何可能使用a codeopen page包括md-button標籤，但是，沒有結果。

有人可以說我如何在我的web應用程序中使用這些模態對話框？

Answer 1

你需要做兩件事情：

1. 添加外部JS資源（角material.js，角aria.js等）。
2. 添加外部CSS資源（角material.css等）
3. 添加外部模塊的依賴關係，當你創建模塊
   angular.module('module', [<dependency1>,<dependency2>])

這裏有一個小fiddle創建一個簡單的例子。

Answer 2

################################################################################### 
# Here is a simple example that works 
# Ensure that you use md-dialog to begin and end the modal 
# as shown in the example below. 
################################################################################### 

<md-card> 
    <md-card-content> 
     <form name="dialogForm"> 

      <md-button 
       class="md-primary md-raised" 
       ng-disabled="dialogForm.$invalid" 
       ng-click="vm.createDialog($event, vm.newDialog)"> 
       Create Dialog 
      </md-button> 

     </form> 
    </md-card-content> 
</md-card> 

//--------------------------------------------------------------------------------- 

(function() { 
    'use strict'; 
    angular 
     .module('app.foo.dialog') 
     .controller('DialogsController', DialogsController); 

    /* @ngInject */ 
    function DialogsController($mdDialog) { 
     var vm = this; 
     vm.createDialog = createDialog; 
     vm.newDialog = { 
      title: 'Are you sure?', 
      content: 'This will delete your files!', 
      ok: 'Agree', 
      cancel: 'Disagree' 
     }; 

     function createDialog($event, dialog) { 
      $mdDialog.show(
       $mdDialog.confirm() 
       .title(dialog.title) 
       .textContent(dialog.content) 
       .ok(dialog.ok) 
       .cancel(dialog.cancel) 
       .targetEvent($event) 
      ); 
     } 
    } 
})(); 

################################################################################### 
# Here is a real life example that works 
# Ensure that you use md-dialog to begin and end the modal 
# as shown in the example below. 
################################################################################### 

# users-list.tmpl 

<table md-data-table class="md-data-table" md-progress="vm.deferred"> 
    <thead md-order="vm.query.contact" md-trigger="vm.getUsers"> 
     <tr> 
      <th name="password" order-by="password"></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="contact in vm.users> 
      <td> 
       <div flex layout="row"> 
        <div> 
         <md-button class="md-warn md-button" ng-click="vm.openPasswordReset(contact, $event)"> 
          Reset Password 
         </md-button> 
        </div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

//-------------------------------------------------------------------------------- 
# users-list.controller 

(function() { 
    'use strict'; 

    angular 
     .module('app.foo.admin') 
     .controller('UsersListController', UsersListController); 

    /* @ngInject */ 

    function UsersListController(
     $scope, 
     $state, 
     $timeout, 
     $mdDialog, 
     userSvc) { 
     var vm = this; 
     vm.clientSvc = clientSvc; 
     vm.userSvc = userSvc; 
     vm.openPasswordReset = openPasswordReset; 

     activate(); 

     function activate() { 

      // init users 
      vm.userSvc.get().then(
       function(users) { 
        initSearchString(users); 

        vm.users = users; 
       }, 
       function(error) { 
        $log.error(error); 
       } 
      ); 
     } 

     function openPasswordReset(contact, $event) { 
      var dialogConfig = { 
       controller: 'PasswordResetController', 
       controllerAs: 'vm', 
       templateUrl: 'app/foo/admin/users/password-reset-dialog.tmpl.html', 
       targetEvent: $event, 
       contact: contact 
      }; 
      $mdDialog.show(dialogConfig); 
     } 
    } 
})(); 

//-------------------------------------------------------------------------------- 
# password-reset-dialog.tmpl.html 

<md-dialog class="contact-dialog mobile-fullwidth-dialog" flex="40" flex-xs="100"> 
    <md-toolbar> 
     <div class="md-toolbar-tools"> 
      <h2 flex> 
       <span>Password Reset</span> 
      </h2> 
      <md-button class="md-icon-button" ng-click="vm.cancelClick()" aria-label="cancel"> 
       <md-icon md-font-icon="zmdi zmdi-close"></md-icon> 
      </md-button> 
     </div> 
    </md-toolbar> 

    <md-dialog-content class="md-dialog-content"> 
     <div flex="100" flex-gt-md="100"> 
      <div class="padding-0"> 
       <form name="resetPasswordUserForm"> 
        <div layout="row" layout-xs="column"> 
         <div flex="100" flex-xs="100"> 
          <div flex layout="row"> 
           <md-input-container flex="100"> 
            Email 
            <md-icon md-font-icon="zmdi zmdi-email" style="color:#47B2E8"></md-icon> 
            <input 
             id="email" 
             label="email" 
             name="email" 
             type="email" 
             ng-model="vm.contact.email" 
             ng-disabled="!vm.isNew" 
             required/> 
            <div ng-messages="resetPasswordUserForm.email.$error"> 
             <div ng-message when="required"><span translate>USER_MANAGEMENT.EMAIL.PLEASE_ENTER</span></div> 
             <div ng-message when="email"><span translate>USER_MANAGEMENT.EMAIL.PLEASE_VALID</span></div> 
            </div> 
           </md-input-container> 
          </div> 
         </div> 
        </div> 

        <div flex layout="row"> 
         <md-input-container flex="100"> 
          First Name 
          <md-icon md-font-icon="zmdi zmdi-account" style="color:#47B2E8"></md-icon> 
          <input 
           id="firstNameEditUser" 
           label="firstName" 
           name="firstName" 
           type="text" 
           ng-model="vm.contact.firstName" 
           ng-disabled="!vm.isNew" 
           required/> 
          <div ng-messages="resetPasswordUserForm.firstName.$error"> 
           <div ng-message when="required"><span translate>Please enter first name</span></div> 
          </div> 
         </md-input-container> 
        </div> 

        <div flex layout="row"> 
         <md-input-container flex="100"> 
          Last Name 
          <md-icon md-font-icon="zmdi zmdi-account-o" style="color:#47B2E8"></md-icon> 
          <input 
           id="lastNameEditUser" 
           label="lastName" 
           name="lastName" 
           type="text" 
           ng-model="vm.contact.lastName" 
           ng-disabled="!vm.isNew" 
           required/> 
          <div ng-messages="resetPasswordUserForm.lastName.$error"> 
           <div ng-message when="required"><span translate>Please enter last name</span></div> 
          </div> 
         </md-input-container> 
        </div> 

        <div layout="row" layout-align="center center"> 
         <md-progress-circular ng-show="vm.loading" md-mode="indeterminate"></md-progress-circular> 
        </div> 

       </form> 
      </div> 
     </div> 
    </md-dialog-content> 
    <md-dialog-content> 
     <div layout="row" class="user-management-card-footer" layout-align="end center"> 
      <md-button 
       class="md-warn md-raised md-button" 
       ng-click="vm.cancelClick()" 
       aria-label="{{Cancel | translate}}" 
       translate="Cancel"> 
      </md-button> 

      <md-button 
       class="md-raised md-primary margin-left-0" 
       ng-click="vm.okClick()" 
       ng-disabled="!vm.contact.email" 
       aria-label="{{Reset Password | translate}}" 
       translate="Reset Password"> 
      </md-button> 
     </div> 
    </md-dialog-content> 
</md-dialog> 

//-------------------------------------------------------------------------------- 

(function() { 
    'use strict'; 

    angular 
     .module('app.foo.admin') 
     .controller('PasswordResetController', PasswordResetController); 

    /* @ngInject */ 
    function PasswordResetController(
     $window, 
     $mdDialog, 
     $mdToast, 
     $filter, 
     $log, 
     $state, 
     userSvc, 
     contact, 
     session) { 
     var vm = this; 
     vm.cancelClick = cancelClick; 
     vm.closeDialogClick = closeDialogClick; 
     vm.okClick = okClick; 
     vm.contact = contact; 
     vm.title = ''; 
     vm.mode = ''; 
     vm.loading = false; 
     vm.session = session; 

     vm.isUpdateMode = function() { 
      return vm.mode === 'reset' ? true : false; 
     }; 

     activate(); 

     function activate() { 
      // init mode [reset] 
      if (angular.isDefined(vm.contact)) { 
       vm.title = 'Password Reset'; 
       vm.mode = 'reset'; 
       vm.isNew = false; 
      } 
     } 

     function okClick() { 
      switch(vm.mode) { 
       case 'reset': 
        reset(); 
        closeDialogClick(); 
       break; 
       default: 
        closeDialogClick(); 
       break; 
      } 
     } 

     function reset() { 
      vm.loading = true; 

      vm.session.sendPasswordReset(vm.contact.email).then(
       function() { 
        vm.loading = false; 
        $mdToast.show(
         $mdToast.simple() 
         .content('Sent Email to User "' + vm.contact.firstName + ' ' + vm.contact.lastName + '"') 
         .position('bottom right') 
         .highlightAction(true) 
         .hideDelay(6000) 
        ).then(function() { 
         $state.go('login'); 
        }); 
       }, 
       function(error) { 
        vm.loading = false; 
        $log.error(angular.toJson(error)); 
       } 
      ); 

     } 

     function cancelClick() { 
      $mdDialog.cancel(); 
     } 

     function closeDialogClick() { 
      $mdDialog.cancel(); 
     } 
    } 
})(); 

//--------------------------------------------------------------------------------