Indice de changement de AngularJS md-onglets ont aucun effet

Dans mon Angulaire de l'application, j'ai un md-onglets dont le md-sélectionné directive est lié à une propriété dans mon contrôleur. Je voudrais changer l'onglet actuel à celui dont l'indice est défini par une fonction appelée par ng-cliquez ailleurs dans mon template.

J'ai fait de cette façon:

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

Dans mon contrôleur, j'ai :

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

Mais il n'a aucun effet lorsque je clique sur mon bouton qui appelle displayMap();

J'ai inspecté le problème:

Lorsque j'ai mis $champ d'application.selectedIndex = 1; dans mon contrôleur, l'onglet par défaut est celui dont l'indice est de 1. OK
Lorsque j'ai mis md-selected="1" dans mon template, l'onglet par défaut est celui dont l'indice est de 1. OK
Lorsque j'ai mis un point d'arrêt dans mon code, et quand je clique sur mon bouton, displayMap() est appelée, et de portée.selectedIndex = 1; est exécuté. OK

Il semble que tout fonctionne bien... à l'exception de l'onglet ne change pas.

Je suis en cours d'exécution Angulaire Matériel 1.0.2

J'ai même utilisé $s'appliquent pour forcer la mise à jour (aucun effet) :

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

FYI - $timeout par lui-même va déclencher $s'appliquent à l'interne . Ne pas répondre à la question ... juste de passage sur info
Proposer angulaire-matériel github issue tracker aussi. Beaucoup d'onglets questions
Oui, je vais vérifier cela

OriginalL'auteur Ben | 2016-01-21

8

Je suis content que vous avez trouvé une solution pour votre problème. Pour éviter que le comportement d'abord, vous devriez jeter un oeil à ce stackoverflow discussion.

Depuis votre selectedIndex variable contient une primitive, chaque nouveau Champ d'application introduit - vous l'avez déjà mentionné le ngIf - détruit la liaison de données et les changements au sein de l'enfant n'aura pas d'effet sur le "dehors".

Dans votre cas, il suffit d'utiliser...
```
$scope.vm = {
  selectedIndex: 0
};
```
...à suivre le point de la règle.

Doit être accepté de répondre. Merci

OriginalL'auteur Moritz Herbert

J'ai résolu mon problème qui est certainement causé par un problème de portée. J'ai simplement utilisé le contrôleur syntaxe et a déclaré que tous les précédents portée de données avec:

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

et balisage:

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

Fonctionne parfaitement maintenant. Je suppose que ma ng-si est en train de modifier ma portée.

les gars... je vous remercie beaucoup. Je me suis amusé avec ce tous les matins. +1

OriginalL'auteur Ben

2

Peut-être que j'ai mal compris quelque chose à propos de votre question, mais cela devrait fonctionner...

J'ai créé un plunker et je ne peux pas reproduire votre comportement, c'est juste fonctionne bien.

Vue:
```
<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>
```
Contrôleur:
```
  function AppCtrl ( $scope ) {
    $scope.selectedIndex = 0;

    $scope.displayMap = function() {
      $scope.selectedIndex = 1; 
  };
```
Pourriez-vous s'il vous plaît vérifier? Espérons que cela aide

Plunker ici

Cela n'a pas fonctionné, mais j'ai trouvé une solution de contournement. Voir ma réponse
Pour être honnête, je ne comprends pas pourquoi tu dis ça ne fonctionne pas...Le plunker de ma réponse est fonctionne bien. De toute façon, je suis content que vous avez résolu le problème
Désolé, ça ne fonctionne pas quand j'ai mis ton code dans mon balisage (à cause de ma portée, je pense). Bien sûr, sur Plunker c'est ok

OriginalL'auteur troig

voici ma solution:

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

OriginalL'auteur anarchist

-1

Avec md-selected = 0, vous allez dans le premier onglet. Et md-selected = 1 pour le deuxième onglet.

bouton:
```
<md-button ng-click="displayMap()">Map</md-button> 
```
contrôleur:
```
 $scope.displayMap = function() {
      $scope.selectedIndex = 1; //select second tab
  };
```
Hmm, oui, mais comment fait-il résoudre mon problème?
vous testez ma proposer? J'ai angulaire du matériel d'application 1.0.0 y travailler
Cela n'a pas fonctionné, mais j'ai trouvé une solution de contournement. Voir ma réponse

OriginalL'auteur Oscar Caicedo

Vous devez vous connecter pour publier un commentaire.