Wie erstelle ich eine Direktive für eine Dropdown-Auswahl?

Question

Nehmen wir an, ich benutze ziemlich viele Dropdown-Optionen (auch bekannt als Comboboxen) für Länder in meiner Anwendung. Um zu vermeiden, den gleichen Code immer wieder zu wiederholen, möchte ich eine Direktive dafür erstellen.

jedoch: folgende Direktive nicht alle meine Erwartungen erfüllen (siehe unten), während copy-Einfügen der Vorlage alle meine Erwartungen nicht erfüllt ..

app.directive('countrydropdown', function($compile) { 
    return { 
    restrict: 'E', //attribute or element 
    scope: { 
     countryUri: '=' 
    }, 
    templateUrl: 'countrydropdown.html', 
    controller : function($scope) { 
     $scope.listItems = [ 
     {name: 'Afghanistan', code: 'AF'}, 
     {name: 'Åland Islands', code: 'AX'}, 
     {name: 'Albania', code: 'AL'}, 
     ];  

wo meine Vorlage ist:

<div> 
    model (inside directive): {{countryUri}} 

    <ui-select ng-model="countryUri" theme="selectize" > 
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match> 
    <ui-select-choices repeat="'/api/countries/'+country.code as country in listItems | filter: $select.search"> 
     <span ng-bind-html="country.name | highlight: $select.search"></span> 
     <small ng-bind-html="country.code | highlight: $select.search"></small> 
    </ui-select-choices> 
    </ui-select> 

</div> 

Was ich erwarten, dass es tun:

• die erste Combo ändern, ändert sich das Modell $ scope.mydata.selectedCountr y. Diese Änderung sollte auch die zweite Kombination betreffen/aktualisieren
• Ändern der zweiten Kombination ändert das Modell $ scope.mydata.selectedCountry. Auch hier sollte die erste Combo
• Durch Drücken der Löschtaste betroffen/aktualisiert werden soll, die Auswahl in den beiden Comboboxen löschen (da die Löschtaste das scope.mydata.selectedCountry Modell $ macht == null)

I muss etwas falsch machen, aber ich kann es nicht finden. Se mein Beispiel in diesem plurkr: http://plnkr.co/edit/oF1R0F1udfiRulx5NvLO?p=preview

Beachten Sie, dass Änderungen in der ersten Combobox, Everyting scheint gut zu funktionieren. (zweite Combo Updates in Ordnung) Sobald ich eine Auswahl auf der zweiten, scheint die Bindung "gebrochen"

Hinweise darauf?

Answer 1

ich modifizierte Code der <ui-select> haben ein Objekt Feld als ng-Modell anstelle eines primitive zu machen. https://github.com/angular/angular.js/wiki/Understanding-Scopes

So, hier ist die wichtigste Änderung:

<ui-select ng-model="countryData.selectedCountry"></ui-select> 

Plunkr: http://plnkr.co/edit/wCiUoI4aeYPs01FMIVwO

Edit 2-Wege-Datenbindung zu einem primitiven kann im Fall eines Eltern/Kind Umfang Situation problematisch sein : Wenn Sie "selectedCountry" in Ihrer Anweisung nicht fest codieren möchten, können Sie Folgendes tun:

<country-dropdown country-data="mydata" field="selectedCountry"></country-dropdown> 

Mit Ihrer Richtlinie Vorlage, die wie folgt aus:

<ui-select ng-model="countryData[field]"> 
... 
</ui-select> 

Plunkr: http://plnkr.co/edit/KdgF8U2KqfiqVZS6BS5N