Angular Material Tabs - 从 ng-click 选项卡内容内手动导航答案

【问题标题】：Angular Material Tabs - Manual navigation from ng-click inside tab contentAngular Material Tabs - 从 ng-click 选项卡内容内手动导航
【发布时间】：2016-08-19 22:41:59
【问题描述】：

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

是否可以在标签内容中添加可点击元素来浏览这些标签。

查看inspector view md-tab-item 有

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

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

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

这样做的原因是，如果人们在移动设备上并且标签标签不完全可见，他们更容易进入忘记密码屏幕。

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

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

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

那么您是否尝试过在控制器中将 $scope.selectedIndex 设置为整数以按索引号选择选项卡？

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

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

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

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

【讨论】：

【解决方案2】：

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

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

这里有一个codepen 说明它是如何工作的。

【讨论】：