Angular Expression in ng-Modell

Question

Ich versuche, ein benutzerdefiniertes Select-Element mit einer Angular-Direktive zu erstellen.

Die Vorlage in dieser Direktive enthält ein Select-Element mit einem ng-Modell-Attribut, das ich vom benutzerdefinierten Element erhalten möchte.

Mein Problem ist Angular erlaubt keinen Angular-Ausdruck als Wert für das ng-Modell-Attribut.

Ich habe auch versucht mit

link: function(scope, element, attributes) { 
    element[0].childNodes[0].setAttribute('data-ng-model', attributes.innerModel); 
} 

ein Attribut setzen es mit dem richtigen Wert das Attribut nicht nehmen, aber es funktioniert immer noch nicht.

Hier ist mein Plunker: Plunker

Answer 1

Sie benötigen einen isolierten Bereich zu definieren. Dadurch wird die dem Attribut inner-model zugewiesene äußere Bereichseigenschaft im Wesentlichen an die interne Bereichseigenschaft innerModel gebunden, die Sie dann in Ihrer Vorlage verwenden können.

app.directive('customSelect', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    scope: { 
     innerModel: "=" 
    } 
    template: '<select ng-model="innerModel" data-ng-transclude></select>', 
    }; 
}); 

Dann könnten Sie tun:

<custom-select inner-model="someScopeProperty"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    ... 
</custom-select> 

(Obwohl ich immer noch verwirrt bin, was Sie erreichen wollen)