AngularJS md-tabs 的更改索引根本没有效果

Question

在我的 Angular 应用程序中，我有一个 md-tabs，其 md-selected 指令绑定到我控制器中的属性。我想将当前选项卡更改为索引由模板中其他位置的 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>

在我的控制器中我有：

  $scope.selectedIndex = 0;
  $scope.displayMap = function() {
      $scope.selectedIndex = 1;
  };

但是当我点击调用 displayMap() 的按钮时，它根本没有任何效果；

我检查了问题：

当我设置$scope.selectedIndex = 1;在我的控制器中，默认选项卡是索引为 1 的选项卡。OK
当我在模板中设置 md-selected="1" 时，默认选项卡是索引为 1 的选项卡。OK
当我在我的代码中设置断点时，当我点击我的按钮时，displayMap() 被调用，并且 $scope.selectedIndex = 1;被执行。好的

似乎一切正常...除了标签没有改变。

我是运行 Angular Material 1.0.2

我什至用 $apply 强制更新（无效）:

  $scope.selectedIndex = 0;
  $scope.displayMap = function () {
      $timeout(function () {
          if (!$scope.$$phase) {
              $scope.$apply(function () {
                  $scope.selectedIndex = 1;
              });
          }
      });
  };

Answer 1

如果 md-selected = 0，您将转到第一个选项卡。并且 md-selected = 1 到第二个选项卡。

按钮：

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

控制器：

 $scope.displayMap = function() {
      $scope.selectedIndex = 1; //select second tab
  };

Answer 2

也许我误解了你的问题，但这应该有用...

我创建了一个 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>

控制器:

  function AppCtrl ( $scope ) {
    $scope.selectedIndex = 0;

    $scope.displayMap = function() {
      $scope.selectedIndex = 1; 
  };

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

Plunker here

Answer 3

我解决了我的问题，这肯定是由范围问题引起的。我简单地使用了 controller as 语法，并声明了之前的每个范围数据：

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>

现在完美运行。我想我的 ng-if 正在修改我的范围。

Answer 4

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

由于您的 selectedIndex 变量包含一个原语，因此引入的每个新范围 - 您已经提到了 ngIf - 都会破坏数据绑定，并且子范围内的更改不会影响 'outside'。

对于您的情况，只需使用...

$scope.vm = {
  selectedIndex: 0
};

...遵循点规则。

Answer 5

这是我的解决方案：

<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>

AngularJS md-tabs 的更改索引根本没有效果

Change index of AngularJS md-tabs have no effect at all

javascript

angularjs

angularjs-scope

angular-material