Angular md-tabの変更インデックスはまったく効果がありません

Question

私のAngularアプリケーションでは、md-selectedディレクティブがコントローラのプロパティにバインドされているmd-tabsがあります。現在のタブを、テンプレートの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-選択=「1」を設定すると、デフォルトのタブがインデックス1 OK
ものであるものです
• コードにブレークポイントを設定し、ボタンをクリックすると、displayMap（）が呼び出され、$ scope.selectedIndex = 1;実行される。 OK

タブが変わらない限り、すべてうまくいくようです。

私は1.0.2

私も更新（効果なし）を強制的に適用されます$使用アンギュラ材質実行している：あなたが最初のタブに移動MD-選択= 0で

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

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

今完璧な作品

。私のng-ifは自分の範囲を変更していたと思います。

Answer 2

。そしてmd-selected = 1が2番目のタブに表示されます。

ボタン：

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

コントローラ：

たぶん私はあなたの質問が、これは動作するはずですについて何かを誤解しました

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

Answer 3

...

私が作成したplunkerとIあなたの行動を再現することはできません、それは正常に動作しています。

ビュー：

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

あなたの問題の回避策を見つけられたらうれしいです。この動作を最初に回避するには、おそらくこのstackoverflow discussionを見てください。

あなたのselectedIndex変数にはプリミティブが含まれているので、新しいスコープが導入されたとき - つまりngIf - データバインディングが破棄され、子スコープ内の変更は '外部'には影響しません。あなたのケースでは

、ちょうどドットルールに従うことを... ...

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