Angularjs 无法使用md tab中的按钮移动具有指令的tab 我使用 MD Tab < /C> >创建多个选项卡，中间的一个有一个指令。

我使用问题的答案，通过每个选项卡下方的“下一步”按钮转到下一个选项卡

以下是守则-

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>

控制器中的功能

$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"/>");
  }
});

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)

如果我点击

Tab4

并点击

Next

。

console.log（）

的输出为

3

如果我去掉指令标签，一切都会正常工作

所以我的观察表明，被选中的被编号如下-

带有指令

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

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)

无指令

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

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)

---

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

似乎是

selectedTab

变量不在产生此问题的指令的范围内

绑定需要作为双向绑定来完成。这个问题有助于理解

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

app.directive（'Myform'，function（）{
返回{
控制器：“MyCtrl”，
范围：{
所选选项卡：'='
},
替换：正确，
链接：函数（$scope、element、attr、MyParentController）{
元素。追加（“”）；
}
});