Javascript AngularJS md选项卡的更改索引完全没有效果

在我的Angular应用程序中，我有一个md选项卡，其md SELECT指令绑定到我控制器中的属性。我想将当前选项卡更改为其索引由一个名为ng click的函数设置的选项卡，单击模板中的其他地方

我是这样做的：

<div ng-controller="TrackingCtrl" layout-fill>
   <md-content ng-if="isSmart" layout-fill>
      <md-tabs md-selected="selectedIndex" layout-fill>
         <md-tab>.........</md-tab>
         <md-tab>.........</md-tab>
         <md-tab>.........</md-tab>
         <md-tab>
            <md-tab-label>{{ 'tracking.positions.TITLE' | translate }}</md-tab-label>
            <md-tab-body>
                <md-tab-content layout-fill flex>
                    <button ng-click="map.panTo(getPosition());displayMap();"></button>
            </md-tab-body>
         </md-tab>
    </md-tabs>
 </md-content>
</div>

但当我单击调用displayMap（）的按钮时，它根本没有效果

我已经检查了问题：

• 当我设置$scope.selectedIndex=1时；在我的控制器中，默认选项卡是索引为1的选项卡正常
• 当我在模板中设置md selected=“1”时，默认选项卡是索引为1的选项卡正常
• 当我在代码中设置断点并单击我的按钮时，会调用displayMap（），并且$scope.selectedIndex=1；被执行正常

看起来一切都很好。。。除了标签没有改变

我正在运行Angular Material 1.0.2

我甚至使用$apply强制更新（无效）：

---

选择md=0时，进入第一个选项卡。在第二个选项卡中选择md=1

按钮：

<md-button ng-click="displayMap()">Map</md-button> 

---

也许我误解了你的问题，但这应该行得通

我已经创造了一个plunker，我不能复制你的行为，它只是工作良好

查看：

<md-tabs class="md-accent" md-selected="selectedIndex">
  <md-tab id="tab1">
    <md-tab-label>Item One</md-tab-label>
    <md-tab-body>
      data.selectedIndex = 0;
    </md-tab-body>
  </md-tab>      
  <md-tab id="tab3">
    <md-tab-label>Item Two</md-tab-label>
    <md-tab-body>
      data.selectedIndex = 1;
    </md-tab-body>
  </md-tab>
</md-tabs>

<md-button ng-click="displayMap()">Map</md-button>

你能检查一下吗？希望能有帮助

---

我解决了我的问题，这肯定是由范围问题引起的。我只是使用控制器作为语法，并使用以下语句声明以前的每个作用域数据：

var self = this;
self.selectedIndex = 0;
self.displayMap = function (){
   self.selectedIndex = 1;
};

和我的标记：

<div ng-controller="TrackingCtrl as tracking" layout-fill>
  <md-content ng-if="tracking.isSmart" layout-fill>
    <md-tabs md-selected="tracking.selectedIndex" layout-fill>
       <md-tab>.........</md-tab>
       <md-tab>.........</md-tab>
       <md-tab>.........</md-tab>
       <md-tab>
          <md-tab-label>{{ 'tracking.positions.TITLE' | translate }}</md-tab-label>
          <md-tab-body>
             <md-tab-content layout-fill flex>
                <button ng-click="tracking.displayMap();"></button>
             </md-tab-content>
          </md-tab-body>
       </md-tab>
  </md-tabs>
 </md-content>
</div>

.........
.........
.........
{{'tracking.positions.TITLE'| translate}}

---

现在工作很完美。我想我的ng if正在修改我的范围。

我很高兴您找到了解决问题的方法。为了避免最初的行为，您可能应该看看这个

由于selectedIndex变量包含一个原语，因此引入的每个新作用域（您已经提到ngIf）都会破坏数据绑定，并且子作用域内的更改不会对“外部”产生影响

在你的情况下，只要使用

$scope.vm = {
  selectedIndex: 0
};

…以遵循点规则

以下是我的解决方案：

<div layout="column" flex>
            <md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedIndex">
                <md-tab label="Genel" md-on-select="vm.selectedIndex = 0">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
                <md-tab label="Sipariş / Planlama" md-on-select="vm.selectedIndex = 1">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
                <md-tab label="Kalite Kontrol Oranları" md-on-select="vm.selectedIndex = 2">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
                <md-tab label="E-Posta" md-on-select="vm.selectedIndex = 3">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
            </md-tabs>
        </div>

{{vm.selectedIndex}
{{vm.selectedIndex}
{{vm.selectedIndex}
{{vm.selectedIndex}

FYI-$timeout本身将在内部触发$apply。不回答问题。。。只需传递infoSuggest检入角度材质github问题跟踪器即可。有很多标签问题是的，我会检查这个你测试我的建议？我有一个角度材料应用程序1.0.0 y，它在工作。它不工作，但我找到了一个解决办法。看我的回答，它不起作用，但我找到了解决办法。看我的答案说实话，我不明白你为什么说它不起作用……我的答案很好。无论如何，我很高兴你已经解决了这个问题。rry，当我把你的代码放在我的标记中时，它不起作用（我想是因为我的范围）。当然在Plunker上是okdude。。。非常感谢你。我整个上午都在搞这个+1这对我来说很有效，应该是公认的答案。谢谢

var self = this;
self.selectedIndex = 0;
self.displayMap = function (){
   self.selectedIndex = 1;
};

<div ng-controller="TrackingCtrl as tracking" layout-fill>
  <md-content ng-if="tracking.isSmart" layout-fill>
    <md-tabs md-selected="tracking.selectedIndex" layout-fill>
       <md-tab>.........</md-tab>
       <md-tab>.........</md-tab>
       <md-tab>.........</md-tab>
       <md-tab>
          <md-tab-label>{{ 'tracking.positions.TITLE' | translate }}</md-tab-label>
          <md-tab-body>
             <md-tab-content layout-fill flex>
                <button ng-click="tracking.displayMap();"></button>
             </md-tab-content>
          </md-tab-body>
       </md-tab>
  </md-tabs>
 </md-content>
</div>

$scope.vm = {
  selectedIndex: 0
};

<div layout="column" flex>
            <md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedIndex">
                <md-tab label="Genel" md-on-select="vm.selectedIndex = 0">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
                <md-tab label="Sipariş / Planlama" md-on-select="vm.selectedIndex = 1">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
                <md-tab label="Kalite Kontrol Oranları" md-on-select="vm.selectedIndex = 2">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
                <md-tab label="E-Posta" md-on-select="vm.selectedIndex = 3">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
            </md-tabs>
        </div>