Question

我使用md-tab创建了多个标签，中间的一个标签有一个指令。

我使用this问题的答案，使用每个标签下方的下一个按钮转到下一个标签。

下面是代码 -

HTML

<md-content class="md-padding">
    <md-tabs md-selected="selectedTab" md-dynamic-height md-border-bottom>
        <md-tab label="Tab1">
            <md-content class="md-padding"> 
               <div class="tab-change-row">
                    <md-button class="tab-btn center-div md-raised" ng-click="changeTab()">Next</md-button>    
                </div>
            </md-content>
        </md-tab>
        <md-tab label="Tab2">
            <md-content class="md-padding"> 
               <div class="tab-change-row">
                    <md-button class="tab-btn center-div md-raised" ng-click="changeTab()">Next</md-button>    
                </div>
            </md-content>
        </md-tab>
        <md-tab label="Tab3">
            <md-content class="md-padding"> 
               <my-directive></my-directive>
               <div class="tab-change-row">
                    <md-button class="tab-btn center-div md-raised" ng-click="changeTab()">Next</md-button>    
                </div>
            </md-content>
        </md-tab>
        <md-tab label="Tab4">
            <md-content class="md-padding"> 
               <div class="tab-change-row">
                    <md-button class="tab-btn center-div md-raised" ng-click="changeTab()">Next</md-button>    
                </div>
            </md-content>
        </md-tab>
        <md-tab label="Tab5">
            <md-content class="md-padding"> 
               <div class="tab-change-row">
                    <md-button class="tab-btn center-div md-raised">Submit</md-button>    
                </div>
            </md-content>
        </md-tab>
     </md-tabs>
</md-content>

CSS

.center_div{
    margin: 0 auto;
    margin-top: 4px;
    width:80% /* value of your choice which suits your alignment */
}
.tab-change-row {
    text-align:center;
}
.tab-change-btn {
    display: inline-block
}

控制器中的功能

$scope.selectedTab = 0;
$scope.changeTab = function() {
    console.log($scope.selectedTab);
    $scope.selectedTab++;
}

指令

app.directive('Myform', function () {
  return {
  controller: 'MyCtrl',
  replace: true,
  link: function($scope, element, attr, MyParentController) {
     element.append("<input name="Myinputfield"/>");
  }
});

当我点击下一个按钮移动到下一个选项卡时，它工作正常，但移动到包含指令的选项卡后，制表移位不起作用。

函数中的console.log打印 -

0
1
0 //After moving to the tab containing the directive.
1 //These numbers after the second 0 are just number they don't shift the tab further.
2
3
4
5
6....

如果我点击Tab4并点击Next。 console.log()的输出为3。

如果删除指令标记，一切都会正常工作。

所以我的观察结果表明所选的被编号为这样的东西 -

使用指令

Tab1, Tab2, Tab3, Tab4, Tab5 -- (0,1,"Don't know, but why it shifts to this tab?",2,3)

无指令

Tab1, Tab2, Tab3, Tab4, Tab5 -- (0,1,2,3,4)

此问题的任何解决方案都非常有用。

Answer 1

似乎selectedTab变量不在创建该问题的指令范围内。

绑定需要以双向绑定的方式完成。 This问题有助于理解。

app.directive('Myform', function () {
  return {
  controller: 'MyCtrl',
  scope: {
      selectedTab: '='
    },
  replace: true,
  link: function($scope, element, attr, MyParentController) {
     element.append("<input name="Myinputfield"/>");
  }
});

使用md-tab中的按钮无法切换具有指令的选项卡

1 个答案: