md-Register: Stellgröße für md gewählten funktioniert nicht, wenn die Funktion von innen ui-Router Aufruf

Question

Ich habe eine ui-router Vorlage enthält md-tabs von denen einige Laschen statisch sind, andere sind dynamisch ng-repeat Iterieren durch ein gegebenes Array der erstellt mit Datenmodell.

Innerhalb dieser dynamisch erstellten Registerkarten gibt es drei Tasten, um die folgenden

• bewegen Registerkarte um eine Position
• bewegt Tab rechts um eine Position

Die move tab Tasten rufen eine Funktion noch zu tun im selben Controller. Der $index Wert der aktuell angezeigten Tabs sowie die gewünschte Richtung (-1 für Linkslauf, 1 für Rechtslauf) werden an die Funktion übergeben.

So sieht das HTML-Snippet für die Ansicht wie folgt:

<md-content flex layout-padding> 
    <md-card> 
     <md-tabs md-dynamic-height md-border-bottom md-autoselect md-swipe-content md-selected="selectedTab"> 
      <md-tab id="{{ 'tab' + $index }}" data-ng-repeat="tab in tabs track by $index"> 
       <md-tab-label>Tab {{ $index + 1 }}</md-tab-label> 
       <md-tab-body> 
        <md-card-title> 
         <md-card-title-text> 
          <div flex layout="row"> 
           <div flex><span class="md-headline">Tab {{ $index + 1 }}</span></div> 
           <div flex align="right"> 
            <md-button ng-click="moveTab(-1, $index)">Move tab left</md-button> 
            <md-button ng-click="moveTab(1, $index)">Move tab right</md-button> 
           </div> 
          </div> 
         </md-card-title-text> 
        </md-card-title> 
        <md-card-content> 
        <p>This is tab {{ $index + 1 }}</p> 
        </md-card-content> 
       </md-tab-body> 
      </md-tab> 
     </md-tabs> 
    </md-card> 
</md-content> 

Die Funktion der Registerkarten bewegen in MainController als implementiert:

$scope.moveTab = function(direction, TabIdx) { 
    var staticTabs = 3 

    var arr = $scope.tabs 
    var fromIdx = sectorIdx 
    var toIdx = tabIdx + direction 

    // correct `toIdx` in order to prevent index overflow for first/last array element 
    if (toIdx < 0) { 
     toIdx = arr.length - 1 
    } else if (toIdx > arr.length-1) { 
     toIdx = 0 
    } 
    else { 
     ; // nothing to do here since `toIdx` does not need to be corrected 
    } 

    var tab = arr.splice(fromIdx, 1)[0] 
    arr.splice(toIdx, 0, tab) 

    $scope.selectedTab = staticTabs + toIdx 
    console.log($scope.selectedTab) 
}  

Nach einem Klick auf die gewünschte Schaltfläche, um eine Registerkarte zu bewegen Die Daten der entsprechenden Registerkarte werden angezeigt. Dies zeigt, dass das Array $scope.tabs richtig funktioniert. Zusätzlich zeigt die Log-Meldung, dass auch der neue Wert für korrekt berechnet wird. Die neue Registerkarte ist jedoch in der Ansicht nicht ausgewählt.

Das verwirrt mich daher beide Variablen $scope.tabs und sind in der gleichen Steuerung definiert und sollte Teil der gleichen $scope Instanz sein. Zusätzlich wird das manipulierte $scope.tabs Array in anderen Ansichten verwendet und zeigt die Tabdaten in der neuen Reihenfolge an, während der neue Wert für nicht verfügbar zu sein scheint und die angezeigte Registerkarte sich nicht ändert.

Answer 1

Dies war ein Problem der Gültigkeitsbereichvererbung, da Datenbindungen, die andere Datentypen als Objekte verwenden, keine Zweiwegebindung aufweisen, wenn sie den übergeordneten Bereich erben.

Lesen Sie die Dokumentation:

Vererbung Scope ist in der Regel einfach, und Sie tun oft nicht auch wissen müssen, es passiert ... bis Sie versuchen, 2-Wege-Datenbindung (dh Form Elemente, ng-model) zu einem Primitiv (z. B. Zahl, String, boolean), das für den übergeordneten Bereich innerhalb des untergeordneten Bereichs definiert ist. Es funktioniert nicht so, wie die meisten Leute erwarten, dass es funktionieren sollte. Was passiert ist, dass der untergeordnete Bereich seine eigene Eigenschaft erhält, die die übergeordnete Eigenschaft desselben Namens verbirgt/schattiert. Dies ist nicht etwas, AngularJS ist doing - das ist, wie JavaScript prototypische Vererbung funktioniert. Neu AngularJS-Entwickler erkennen oft nicht, dass ng-repeat, ng-switch, ng-view und ng-include alle neue untergeordnete Bereiche erstellen, sodass das Problem oft auftaucht, wenn diese Direktiven betroffen sind. [...]

Dieses Problem mit Primitiven kann leicht vermieden werden, indem man die "Best Practice" von immer ein '.' im ng-Modelle [...]

Nach

Wechsel

selectedTab 

zu

selectedTab.inputTab 

sowohl in der gegebenen HTML- und JS-Schnipsel alles wie erwartet funktioniert.