Question

我正在使用md-tabs，但我想要内容，即md-tab-body中所述的内容，您可以以某种方式在外面声明。例如：

<md-tabs ...>
    <md-tab>
        <md-tab-label>Tab 1</md-tab-label>
    </md-tab>
    <md-tab>
        <md-tab-label>Tab 2</md-tab-label>
    </md-tab>
    <md-tab>
        <md-tab-label>Tab 3</md-tab-label>
    </md-tab>
</md-tabs>
<div layout="row">
    <div flex="50">
        <md-tab-body>Body for md-tab 1</md-tab-body>
        <md-tab-body>Body for md-tab 2</md-tab-body>
        <md-tab-body>Body for md-tab 3</md-tab-body>
    </div>
    <div class="map" flex="50">...</div>
</div>

有没有办法做到这一点？同样不是单独的，但我希望md-tab-body除以共同的div，在这种情况下div.map。

Answer 1

我也有类似的要求，但我找不到直接的解决方案，但这就是我的做法。

在视图中

<md-tabs ...>
<md-tab md-on-select="selectTab('md-tab-1')">
    <md-tab-label>Tab 1</md-tab-label>
</md-tab>
<md-tab md-on-select="selectTab('md-tab-2')">
    <md-tab-label>Tab 2</md-tab-label>
</md-tab>
<md-tab md-on-select="selectTab('md-tab-3')">
    <md-tab-label>Tab 3</md-tab-label>
</md-tab>
</md-tabs>
<div layout="row">
<div flex="50">
    <md-tab-body ng-Show="isSelected('md-tab-1')">Body for md-tab 1</md-tab-body>
    <md-tab-body ng-Show="isSelected('md-tab-2')">Body for md-tab 2</md-tab-body>
    <md-tab-body ng-Show="isSelected('md-tab-3')">Body for md-tab 3</md-tab-body>
</div>
<div class="map" flex="50">...</div>
</div>

在控制器

中

$scope.selectedTab = 'md-tab-1';

$scope.selectTab = function(tab) {
$scope.selectedTab = tab;
}

$scope.isSelected = function(tab) {
return tab === $scope.selectedTab;
}

您还可以将每个标签映射到路线/控制器，并按照上面的示例动态加载您的内容。

Answer 2

不，没有办法。但是，您可以使用md-selected="data.selectedIndex"和ui-view/ng-view之类的内容，具体取决于您管理视图的方式。跟踪选项卡索引并更改视图。

md-tab-body外面的md-tab-body

2 个答案:

在视图中

在控制器