“角度材料”对话框选项卡式

更好的解决方案：

"属性与范围变量"selectedIndex"放在一起，该变量将具有所需的选项卡值。

<md-tabs selected="selectedTab" >

在相应的控制器中：

$scope.selectedTab=1;//tab number

然后，您可以使用 ng 单击按钮来更改此值，让范围函数更改其值;

Angular Material 内置的 md-tabs 和 md-tab 指令具有默认值，需要覆盖这些默认值才能通过包含您自己的ng-class来设置 md-active。选项卡上的"角度材质"默认 ng 类如下所示：

ng-class="{ 'md-active':tab.isActive(), 'md-focused':tab.hasFocus(), 'md-disabled':tab.scope.disabled }"

因为我的问题只有两个选项卡，所以我通过捕获哪个按钮被推入locals然后将其分配给控制器$scope.active中的一个变量来禁用默认选项卡，然后禁用默认选项卡如果用户没有像这样推送登录：

<md-tab label="Login" ng-disabled="active!='Login'">

我使用了两个模板、两个控制器和一个工厂。第一个模板具有用户单击的按钮：

<md-button ng-click="showTabDialog({tab: 0, event: $event})">One</md-button>
<md-button ng-click="showTabDialog({tab: 1, event: $event})">Two</md-button>
<md-button ng-click="showTabDialog({tab: 2, event: $event})">Three</md-button>

请注意从零开始的计数。单击将传递包含两个项目的数据对象：用户选择的选项卡和$event(MouseEvent(。

第一个控制器包括以下处理程序函数：

  $scope.showTabDialog = function(data) {
    var userData = {
      selectedTab: data.tab
    };
    userFactory.set(userData); // passes data object to other controllers
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'javascript/templates/tabDialog.html',
      parent: angular.element(document.body),
      targetEvent: data.event,
      clickOutsideToClose:true
    })
    .then(function(answer) {
      // fires on $scope.hide
    })
    .catch(function(error) {
      if (error) {
          console.error(error);
        }
      {
        // fires on $scope.cancel
      }
    });
  };

处理程序函数获取从单击按钮传入的data对象，然后将数据对象发送到工厂，该工厂将数据对象传递给第二个控制器。接下来，$mdDialog.show用于制作选项卡式对话框，其中包含第二个控制器和第二个模板的参数。其余的都是样板。 targetEvent停止向 DOM 树传播。我输入了then和catch，以防您想对$scope.hide和$scope.cancel做点什么.

这是工厂：

app.factory('userFactory', function() {
  var userObject = null;
  function set(user) {
    userObject = user;
  };
  function get() {
    return userObject;
  };
  return {
    set: set,
    get: get
  };
});

我将第二个控制器放在第一个控制器中，在处理程序函数下方：

  function DialogController($scope, $mdDialog) {
    $scope.user = userFactory.get();
    $scope.selectedTab = $scope.user.selectedTab || 0;
    $scope.hide = function() {
      $mdDialog.hide();
    };
    $scope.cancel = function() {
      $mdDialog.cancel();
    };
    $scope.answer = function(answer) {
      $mdDialog.hide(answer);
    };
  }

此控制器获取通过工厂传入的数据，然后将数据设置为其$scope。请注意，这个控制器有自己的$scope，而不是第一个控制器的$scope。我不使用$scope.hide或$scope.answer但我留下了这些，以防您需要它们。

最后，这是我的对话框模板：

<md-dialog aria-label="tabbed dialog">
  <form>
    <md-toolbar>
    <div class="md-toolbar-tools">
      <img ng-src="myLogo.png" alt="logo" style="height: 36px;">
      <h2> MyCompany.com</h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="cancel()">
        <md-icon md-svg-src="media/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
      </md-button>
    </div>
  </md-toolbar>
  <md-dialog-content style="max-width:800px;max-height:810px; ">
    <md-tabs md-dynamic-height md-border-bottom md-selected="selectedTab">
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>Lorem ipsum...</p>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <p>Lorem ipsum...</p>
        </md-content>
      </md-tab>
      <md-tab label="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
          <p>Lorem ipsum...</p>
        </md-content>
      </md-tab>
</md-tabs>
</md-dialog-content>
</form>
</md-dialog>