Zmiana indeksu Angular md-tabs nie ma żadnego efektu

Question

W mojej aplikacji Angular mam karty md, których dyrektywa wybrana przez md jest powiązana z właściwością w moim kontrolerze. Chciałbym zmienić bieżącą kartę na tę, której indeks jest ustawiony przez funkcję wywoływaną przez ng-click w innym miejscu w moim szablonie.

zrobiłem to w ten sposób:

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

W moim kontroler mam:

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

Ale to nie ma znaczenia w ogóle, gdy klikam przycisk, który wywołuje mój displayMap();

Mam sprawdzony problem:

• Kiedy ustawić $ scope.selectedIndex = 1; w moim kontrolera, zakładka domyślna to ten, którego indeks jest 1. OK
• Kiedy ustawić MD-selected = „1” w moim szablonu, zakładka domyślna to ten, którego indeks jest 1. OK
• Po ustawieniu punktu przerwania w moim kodzie, a po kliknięciu przycisku wywoływana jest metoda displayMap() i $ scope.selectedIndex = 1; jest wykonywany. OK

Wydaje wszystko działa dobrze ... z wyjątkiem karta nie zmienia.

biegnę kątowy Materiał 1.0.2

I nawet używany $ zastosować, aby wymusić aktualizację (bez efektu):

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

Answer 1

mi rozwiązać mój problem, który z pewnością spowodowane przez emisję zakres.I po prostu używany kontroler jak składni i oświadczył, co poprzednie dane zakresie o:

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

i mój znaczników:

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

Działa idealnie teraz. Domyślam się, że moja ng-if zmieniała mój zakres.

Answer 2

MD-selected = 0 idziesz do pierwszej karcie. I md-selected = 1 do drugiej zakładki.

przycisk:

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

kontroler:

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

Answer 3

Może ja źle coś o twoje pytanie, ale to powinno działać ...

Utworzyłem plunker i ja nie może odtworzyć twojego zachowania, po prostu działa dobrze.

Zobacz:

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

Controller:

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

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

mógłbyś to sprawdzić? Nadzieję, że pomoże

Plunker here

Answer 4

Cieszę się, że znalazłeś obejście tego problemu. Aby uniknąć tego zachowania na początku, prawdopodobnie powinieneś spojrzeć na to stackoverflow discussion.

Ponieważ zmienna selectedIndex zawiera prymitywne, każdy nowy zakres wprowadzony - już wspomniano ngIf - niszczy powiązanie danych, a zmiany w zakresie podrzędnym nie będą miały wpływu na "zewnętrzne".

W Twoim przypadku, wystarczy użyć ...

$scope.vm = { 
    selectedIndex: 0 
}; 

... podążać regułę dot.

Answer 5

tu jest moje rozwiązanie:

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