Question

我是Angular Material的新手，虽然我很容易适应，但是我已经烫了一块墙，而Angular Material没有广泛的文档也无济于事。

我已经成功实现了一个对话框面板（我们Bootstrapers的模态）并且它可以工作。我想我可以复制文件，因此我需要尽可能多的对话框，但我很难相信这是正确的做事方式，因为我最终可能有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',中有另一个模板，我想从另一个按钮访问该模板。

是否有更简单/正确的方法为该模板生成一个不需要复制整个控制器的对话框？

Spoiler alert - bootstrap angular是一个禁忌。整个系统需要以有角度的材料运行

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();
    }
  }
})();

一个控制器中有多个$ mdPanel

1 个答案: