Debuggen von Angular1 Dropdown-Menü wählen

Question

Ich habe Angular1 selects schon einmal benutzt, aber ich habe eine wilde Zeit, die entwirrt, was eine Auswahl bricht, mit der ich gerade arbeite.

Hier ist die Vorlage für die select ich zu bauen bin versucht:

<div class="dropdown-selector-container"> 
    <select 
    class="dropdown-select" 
    data-ng-options="option.sectionId as option.label for option in dropdownOptions" 
    data-ng-model="selectedSection" 
    data-ng-change="setDropdownOption()"> 
    </select> 
</div> 

Das Objekt und Verfahren in der Steuerung wie folgt aussehen:

$scope.dropdownOptions = [ 
    { 
    'label': 'ok', 
    'sectionId': '1', 
    }, 
    { 
    'label': 'wow', 
    'sectionId': '2', 
    } 
]; 

$scope.setDropdownOption = function() { 
    console.log($scope); 
}; 

Eine Arbeits Geige des beabsichtigten Verhalten verfügbar here.

Das Problem ist, wenn ich replizieren den Code aus dem Geige in einem template und controller innerhalb einer Route in meinem development instance (wo der Drop-Down auf Ansichtsfenster mit einer Breite 800px oder weniger nur sichtbar ist), Objekt des $ Zustand durch die gedruckt Reglerfunktion keine selectedSection Schlüssel enthalten:

weiß jemand, warum das der Fall sein könnte? Ich wäre sehr dankbar für jeden Rat, den Sie anbieten können!

Answer 1

Der Schlüssel zur Lösung dieses Problems war zu lernen, dass man den Umfang eines Elements von der Konsole mit etwas wie angular.element(".dropdown-selector-container select").scope() untersuchen kann. Dies führte mich zu einer Lösung:

Ich bemerkte, dass das DropDropOptions-Objekt in der Controller-Bereich vorhanden war, so dass ich das Data-ng-Modell auf dropdownOptions.selected, und bei Änderung kann ich jetzt mit diesem Wert interagieren.

diese Art der Vererbung React macht so viel schöner ...