Angular Material 选项卡 - 从 ng-click 选项卡内容中手动导航

Question

我们在登录屏幕上使用 angular material 个选项卡，总共三个选项卡，登录、注册和忘记密码。

是否可以在选项卡内容中添加可点击元素以浏览这些选项卡。

在检查器视图中查看 md-tab-item 有

ng-click="$mdTabsCtrl.select(tab.getIndex())"

但是将其添加到选项卡内容中的元素不会触发任何事件。

<span ng-click="$mdTabsCtrl.select(tab.getIndex())">Forgot Password</span>

这样做的原因是，如果人们使用移动设备并且标签标签不完全可见，那么他们可以更轻松地进入忘记密码屏幕。

Answer 1

文档说 md-selected 属性 select 是选项卡。

<md-tabs md-selected="selectedIndex">

那么您是否尝试过将控制器中的 $scope.selectedIndex 设置为一个整数以 select 按索引号显示的选项卡？

您需要在控制器上调用一个函数来执行此操作。例如

<span ng-click="changeTab(3)">Forgot Password</span>

然后在你的控制器中...

$scope.changeTab = function(index){
    $scope.selectedIndex = index;
}

Answer 2

jon64digital 的想法是正确的。在 md-tabs 元素上，您可以将 md-selected 属性放置在将其与范围内的索引相关联的位置。然后写一个函数来改变索引。

<md-tabs md-selected="selectedIndex">
...

这里 codepen 介绍了它的工作原理。