web-dev-qa-db-ja.com

AngularJS md-tabのインデックスを変更してもまったく影響がない

私のAngularアプリでは、md-selectedディレクティブがコントローラーのプロパティにバインドされているmd-tabがあります。現在のタブを、インデックスが設定されているタブに変更しますテンプレートのどこかで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;実行されます。 [〜＃〜] ok [〜＃〜]

タブは変更されないことを除いて、すべて正常に動作しているようです。

実行中Angular Material 1.0.2

$ applyを使用して更新を強制することもできました（影響なし）：

  $scope.selectedIndex = 0;
  $scope.displayMap = function () {
      $timeout(function () {
          if (!$scope.$$phase) {
              $scope.$apply(function () {
                  $scope.selectedIndex = 1;
              });
          }
      });
  };
javascriptangularjsangularjs-scopeangular-material
11
Ben

スコープの問題が原因だった問題を解決しました。私は単に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がスコープを変更していたと思います。

6
Ben

問題の回避策を見つけてよかったです。最初にその動作を回避するには、おそらくこれを確認する必要があります stackoverflowの議論 。

SelectedIndex変数はプリミティブを保持するため、導入されたすべての新しいスコープ-すでにngIfについて述べました-はデータバインディングを破棄し、子スコープ内の変更は「外部」に影響しません。

あなたのケースでは、単に使用してください...

$scope.vm = {
  selectedIndex: 0
};

...に従うドットルール。

10
Moritz Herbert

多分私はあなたの質問について何かを誤解しましたが、これはうまくいくはずです...

プランカーを作成しましたが、あなたの行動を再現できません。問題なく機能しています。

ビュー：

<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

2
troig

これが私の解決策です：

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