angularjs - md-selected 在 md-tab 中无法正常工作

Question

var app = angular.module('tabsDemo', ['ngMaterial']);
app.controller('TabsController',tabsController);
function tabsController($scope){
    $scope.showBack = false;
    //$scope.selectedIndex = 3;
    $scope.tabs = [1,2,3,4,5,6];
    $scope.changeTabs = function(){
      $scope.showBack = true;
      $scope.tabs = ['a','b'];
    }
    $scope.goHome = function(){
      $scope.showBack = false;
      $scope.tabs = [1,2,3,4,5,6];
      $scope.selectedIndex = 3;
    }
}

<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<div ng-app="tabsDemo" ng-controller="TabsController">

  <md-button ng-show = "showBack" ng-click = "goHome()">
   <i class="material-icons">keyboard_backspace</i>
  </md-button>
  
  <md-tabs md-selected="selectedIndex" md-stretch-tabs>
    <md-tab ng-repeat="tab in tabs" label="{{tab}}">
      <div style="text-align: center;">
      
         <button ng-bind="tab" ng-click="changeTabs()"></button>
            
      </div>
    </md-tab>
  </md-tabs>
</div>

如果我直接从 Controller 分配selectedIndex值，它正在工作(更改选项卡)。如果我从函数内部分配此值，它不会影响选项卡并将选项卡索引设置为零。

Answer 1

您可以使用超时来反射(reflect) selectedIndex 的变化:

var app = angular.module('tabsDemo', ['ngMaterial']);
app.controller('TabsController',tabsController);
function tabsController($scope,$timeout){
    $scope.showBack = false;
    
    $scope.ctrl = {};
     $scope.ctrl.selectedIndex = 3;
    $scope.tabs = [1,2,3,4,5,6];
    $scope.changeTabs = function(){
      $scope.showBack = true;
      $scope.tabs = ['a','b'];
    }
    $scope.goHome = function(){
      $scope.showBack = false;
      $scope.tabs = [1,2,3,4,5,6];
       $timeout(function () {
           $scope.ctrl.selectedIndex = 3;
       });
     
    }
    
}

<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div ng-app="tabsDemo" ng-controller="TabsController">

  <md-button ng-show="showBack" ng-click="goHome()">
    <i class="material-icons">keyboard_backspace</i>
  </md-button>

  <md-tabs md-selected="ctrl.selectedIndex" md-stretch-tabs ng-disabled="tabs.length <= 1">
    <md-tab ng-repeat="tab in tabs" label="{{tab}}">
      <div style="text-align: center;">

        <button ng-click="changeTabs()">Change Tab</button>

      </div>
    </md-tab>
  </md-tabs>
</div>