複数の$ mdPanelが1つのコントローラにあります

Question

私は角度材を初めて使用しましたが、私はかなり簡単に適応しましたが、壁が暑くなり角度のある材質に広範囲の文書がないことには役立ちません。

私は正常にダイアログパネル（私たちのためのモーダルブートストラップ）を実装しています。私はファイルを複製することができると思うので、必要な数のダイアログが必要ですが、100のダイアログを持つことができ、それが100のHTTPリクエストを意味するため、これは正しい方法だと信じていますすべて個々のコントローラーにあります。ですから、私の質問は簡単ですが、どのようにしてダイアログ/パネルコントローラを使用して、必要な数のダイアログをプログラムで作成することができますか？

これは、コントローラのコード

app.controller('AnimationCtrl', AnimationCtrl); 

function AnimationCtrl($mdPanel) { 
    this._mdPanel = $mdPanel; 
    this.openFrom = 'button'; 
    this.closeTo = 'button'; 
    this.animationType = 'scale'; 
} 

AnimationCtrl.prototype.showDialog = function() { 
    var position = this._mdPanel.newPanelPosition() 
     .absolute().center().center(); 

    var animation = this._mdPanel.newPanelAnimation(); 

    switch (this.openFrom) { 
     case 'button': 
      animation.openFrom('.animation-target'); 
      break; 
     case 'corner': 
      animation.openFrom({ 
       top: 0, 
       left: 0 
      }); 
      break; 
     case 'bottom': 
      animation.openFrom({ 
       top: document.documentElement.clientHeight, 
       left: document.documentElement.clientWidth/2 - 250 
      }); 
    } 
    switch (this.closeTo) { 
     case 'button': 
      animation.closeTo('.animation-target'); 
      break; 
     case 'corner': 
      animation.closeTo({ 
       top: 0, 
       left: 0 
      }); 
      break; 
     case 'bottom': 
      animation.closeTo({ 
       top: document.documentElement.clientHeight, 
       left: document.documentElement.clientWidth/2 - 250 
      }); 
    } 
    switch (this.animationType) { 
     case 'custom': 
      animation.withAnimation({ 
       open: 'demo-dialog-custom-animation-open', 
       close: 'demo-dialog-custom-animation-close' 
      }); 
      break; 
     case 'slide': 
      animation.withAnimation(this._mdPanel.animation.SLIDE); 
      break; 
     case 'scale': 
      animation.withAnimation(this._mdPanel.animation.SCALE); 
      break; 
     case 'fade': 
      animation.withAnimation(this._mdPanel.animation.FADE); 
      break; 
     case 'none': 
      animation = undefined; 
      break; 
    } 

    var logoutMsgConfig = { 
     animation: animation, 
     attachTo: angular.element(document.body), 
     controller: DialogCtrl, 
     controllerAs: 'ctrl', 
     templateUrl: 'views/partials/logoutMsg.html', 
     panelClass: 'demo-dialog-example', 
     position: position, 
     trapFocus: true, 
     zIndex: 150, 
     clickOutsideToClose: true, 
     clickEscapeToClose: true, 
     hasBackdrop: true, 
    }; 

    this._mdPanel.open(logoutMsgConfig); 
}; 


app.controller('DialogCtrl', DialogCtrl); 
function DialogCtrl(mdPanelRef) { 
    this._mdPanelRef = mdPanelRef; 
} 

DialogCtrl.prototype.closeDialog = function() { 
    // closes/dismisses the dialog 
    this._mdPanelRef && this._mdPanelRef.close(); 
}; 

DialogCtrl.prototype.okDialog = function($scope) { 
    // A button that will take me somewhere 
}; 

現在、このダイアログは、ログアウトボタンから開いて、私は別のボタンからアクセスしたいtemplateUrl: 'views/partials/approvalsMsg.html',で別のテンプレートを持っています。

コントローラー全体の複製を必要としないそのテンプレート用のダイアログを作成するより簡単で適切な方法はありますか？

スポイラーアラート - ブートストラップ角度はノーではありません。 https://material.angularjs.org/latest/demo/panel：システム全体が

Answer 1

(function() { 
    'use strict'; 

    angular 
    .module('panelGroupsDemo', ['ngMaterial']) 
    .controller('PanelGroupsCtrl', PanelGroupsCtrl) 
    .controller('PanelMenuCtrl', PanelMenuCtrl); 

    function PanelGroupsCtrl($mdPanel) { 
    this.settings = { 
     name: 'settings', 
     items: [ 
     'Home', 
     'About', 
     'Contact' 
     ] 
    }; 
    this.favorite = { 
     name: 'favorite', 
     items: [ 
     'Add to Favorites' 
     ] 
    }; 
    this.more = { 
     name: 'more', 
     items: [ 
     'Account', 
     'Sign Out' 
     ] 
    }; 
    this.tools = { 
     name: 'tools', 
     items: [ 
     'Create', 
     'Delete' 
     ] 
    }; 
    this.code = { 
     name: 'code', 
     items: [ 
     'See Source', 
     'See Commits' 
     ] 
    }; 

    this.menuTemplate = '' + 
     '<div class="menu-panel" md-whiteframe="4">' + 
     ' <div class="menu-content">' + 
     ' <div class="menu-item" ng-repeat="item in ctrl.items">' + 
     '  <button class="md-button">' + 
     '  <span>{{item}}</span>' + 
     '  </button>' + 
     ' </div>' + 
     ' <md-divider></md-divider>' + 
     ' <div class="menu-item">' + 
     '  <button class="md-button" ng-click="ctrl.closeMenu()">' + 
     '  <span>Close Menu</span>' + 
     '  </button>' + 
     ' </div>' + 
     ' </div>' + 
     '</div>'; 

    $mdPanel.newPanelGroup('toolbar', { 
     maxOpen: 2 
    }); 

    $mdPanel.newPanelGroup('menus', { 
     maxOpen: 3 
    }); 

    this.showToolbarMenu = function($event, menu) { 
     var template = this.menuTemplate; 

     var position = $mdPanel.newPanelPosition() 
      .relativeTo($event.srcElement) 
      .addPanelPosition(
      $mdPanel.xPosition.ALIGN_START, 
      $mdPanel.yPosition.BELOW 
     ); 

     var config = { 
     id: 'toolbar_' + menu.name, 
     attachTo: angular.element(document.body), 
     controller: PanelMenuCtrl, 
     controllerAs: 'ctrl', 
     template: template, 
     position: position, 
     panelClass: 'menu-panel-container', 
     locals: { 
      items: menu.items 
     }, 
     openFrom: $event, 
     focusOnOpen: false, 
     zIndex: 100, 
     propagateContainerEvents: true, 
     groupName: ['toolbar', 'menus'] 
     }; 

     $mdPanel.open(config); 
    }; 

    this.showContentMenu = function($event, menu) { 
     var template = this.menuTemplate; 

     var position = $mdPanel.newPanelPosition() 
      .relativeTo($event.srcElement) 
      .addPanelPosition(
      $mdPanel.xPosition.ALIGN_START, 
      $mdPanel.yPosition.BELOW 
     ); 

     var config = { 
     id: 'content_' + menu.name, 
     attachTo: angular.element(document.body), 
     controller: PanelMenuCtrl, 
     controllerAs: 'ctrl', 
     template: template, 
     position: position, 
     panelClass: 'menu-panel-container', 
     locals: { 
      items: menu.items 
     }, 
     openFrom: $event, 
     focusOnOpen: false, 
     zIndex: 100, 
     propagateContainerEvents: true, 
     groupName: 'menus' 
     }; 

     $mdPanel.open(config); 
    }; 
    } 

    function PanelMenuCtrl(mdPanelRef) { 
    this.closeMenu = function() { 
     mdPanelRef && mdPanelRef.close(); 
    } 
    } 
})();