角材料对话框选项卡式

Question

我的对话框中有两个选项卡。 如何根据用户点击的按钮动态设置哪个处于活动状态。

这是我的按钮：

<md-button ng-click="showTabDialog($event, 'login')" class="md-raised md-primary">Login</md-button>

<md-button ng-click="showTabDialog($event, 'signup')" class="md-raised md-primary">Signup</md-button>

这是我的对话框 html 模板

<md-dialog aria-label="Login">
<form>
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>Login</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="cancel()">
                <md-icon aria-label="Close dialog"></md-icon>
                <!--md-svg-src="img/icons/ic_close_24px.svg"-->
            </md-button>
        </div>
    </md-toolbar>
    <md-dialog-content style="max-width:800px;max-height:810px; ">
        <md-tabs md-dynamic-height md-border-bottom>
            <md-tab label="Login">
                <md-content class="md-padding">
                    <h1 class="md-display-2">Log In</h1>
                    <p>Login here or click sign up to create a new account.</p>
                </md-content>
            </md-tab>
            <md-tab label="Sign Up">
                <md-content class="md-padding">
                    <h1 class="md-display-2">Sign Up</h1>
                    <p>Sign Up here</p>
                </md-content>
            </md-tab>
        </md-tabs>
    </md-dialog-content>
    <md-dialog-actions layout="row">
        <span flex></span>
        <md-button ng-click="answer('not useful')" >
            Not Useful
        </md-button>
        <md-button ng-click="answer('useful')" style="margin-right:20px;" >
            Useful
        </md-button>
    </md-dialog-actions>
</form>
</md-dialog>

这是我的JS：

$scope.showTabDialog = function(ev, button) {
    var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  &&       
$scope.customFullscreen;
    $mdDialog.show({
        controller: 'SignUpCTRL',
        templateUrl: 'app/login/signup.modal.html',
        parent: angular.element(document.h1),
        targetEvent: ev,
        clickOutsideToClose:true,
        openFrom: '#center',
        fullscreen: useFullScreen
    })
        .then(function(answer) {
            $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
            $scope.status = 'You cancelled the dialog.';
        });
};

所以重申一下，用户点击注册对话框，然后框打开，注册选项卡聚焦。 用户点击登录按钮，对话框出现并聚焦登录选项卡。

Answer 1

编辑：更好的解决方案：

您可以将“selected”属性与范围变量“selectedIndex”一起放置，该变量需要选择选项卡值。

<md-tabs selected="selectedTab" >

在相应的控制器中：

$scope.selectedTab=1;//tab number

然后，您可以使用 ng-click 按钮更改此值，从而让范围函数更改其值；

Answer 2

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

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'">

Answer 3

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

<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 树。 如果你想用$scope.hide和$scope.cancel做点什么，我就输入then catch 。

这是工厂：

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>