AngularJs - bind ein ng-model Direktive mit zwei Eingängen
Erstellen einer range
Richtlinie die Bindung zu einem ng-model
- und Ausgänge zwei input
Felder mit einem filter
(selbst schon gemacht). Im wesentlichen habe ich eine Richtung von Modell zu input arbeiten, aber die andere Seite von input-zu-Modell nicht. Wie dies zu erreichen?
Habe ich dieses Html:
<div tu-range ng-model="arbitraymodel" />
Und ein Modell:
var arbitrarymodel = "10/22";
Randnotiz; ich habe einen filter auf split dieser beiden Werte:
{{ feature.Value | split:\'/\':0}}
Und dieser Richtlinie:
.directive('tuRange', function($compile) {
return {
restrict: 'A',
require: 'ngModel',
scope: {
feature: '=',
tudisabled: '=',
model: '=ngModel' //edited
},
template: '<input type="text" '+
'ng-value="{{ model | split:\'/\':0}}" />'+ //edited to 'model'
'-<input type="text" '+
'ng-value="{{ model | split:\'/\':1}}" />', //edited to 'model'
link: function(scope, element, attributes, ngModel) {
}
};
})
- Tun Sie wirklich brauchen, es zu tun mit dem Wert von
10/22
? Warum nicht verwenden ein Objekt, mitarbitrary.begin
undarbitrary.end
lösen? Sie können beides miteinander verbinden, wieder zu einem Wert, wenn Sie wollen mit einem change-listener. - hm, nicht so sicher über diese, aber wie macht er umkehren der Filter für die zwei-Wege-Bindung?
- Ich machte eine kleine änderung der Richtlinie Geltungsbereich hinzufügen
model
. @ConcurrentHashMap ja, es sind nicht die optimalen Daten, die ich bekomme. Aber irgendwann muss es sein, zurück zu senden, so, um sicherzustellen, dass alles an einem Ort geschieht, würde ich mag, um es in der Richtlinie.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den richtigen Weg (IMO) ist die Erstellung eines custom controls beschrieben hier.
Als eine übung, implementiert habe ich es in diesem fiddle: http://jsfiddle.net/6cn7y/
Den code der Richtlinie ist (Sie müssen möglicherweise passen einige details):
Und seine Verwendung wäre:
Ich bezweifle, dass der Filter erhalten Sie überall mit, da Sie das nicht tun 2-Wege-Bindung.
BEARBEITEN: Auch wenn es das problem löst, würde ich vorschlagen, einen etwas anderen Ansatz. Ich würde definieren Sie das Modell der
range
Richtlinie als Objekt:Dies bedeutet, dass die Ausgabe in die
ctrl.theRange
variable im Beispiel wäre ein Objekt, wie das der oben genannten. Wenn Sie wirklich wollen, die string-format"from/to"
fügen Sie einen parser/formatter in derngModel
pipelines, d.h. dieconstructRangeString()
Funktion. Mit dem parser/formatter, diectrl.theRange
variable wird der gewünschte string-format, während die code mehr modularisiert (dieconstructRangeString()
- Funktion für externe Richtlinie) und mehr parametrisierte (das Modell in einem format vorliegen, können easilly werden verarbeitet und transformiert).- Und ein proof-of-concept: http://jsfiddle.net/W99rX/
if(!from && !to) return null;
die Ergebnisse in ein leeres Modell. 2. bei der Verwendung von um 180 reicht (weil es eine Daten-grid), es ist sehr langsam.unshift()
von der$formatters
stattpush
ing - I halten immer verwirrt, mit dieser. 2. Das ist interessant (und bedauerlich). Eine Optimierung würde ich versuchen, nehmen Sie die anzeigen-Werte direkt mit dem DOM-Ereignisse und nicht mit dem verschachtelten form undng-model
s. Dies reduziert die Uhren, sondern erschweren Sie den code. Eine weitere Optimierung ist es, zu versuchen, zu ersetzen, um die tief Uhr mit 2 separate Uhren für"from"
und"to"
. Ich erwarte nicht, dass es viel zu tun, aber man weiß ja nie.RexExp
, aber am Ende war es langsam. Also nahm ich das set bekam ich durch eine$http()
und verändert die Werte mitvalue.split('/')
(mit ein paar checks), und legen Sie es in der globalenmodel.from
/.to
, und auch jetzt ist es noch langsamer. Also ich denke, ich muss mit Ihr fertig zu werden. Oder vielleicht nur das update dermodel
mit einemng-blur
zum aktualisieren der Werte. Ich habe, um zu sehen, was zu tun ist :). Vielen Dank bisher 🙂$render
Methode wurde verwendet zum aktualisieren der html. Also, warum legen Sie diescope.from
undscope.to
Variablen innerhalb der$render
Methode statt etwas zu tun, wieelement.find('input').eq(0).val(from)
(und ähnlich fürto
)?ng-model
in seiner Eingänge. In der Tat ist es nicht nur möglich, sondern auch potentiell mehr Leistung bietet, zu nutzen, DOM-manipulation hier, weniger wegen der Uhren. Auf der Kehrseite, es erfordert mehr code: Nicht nur die Art und Weise, in$render
, aber auch den anderen Weg: Sie müssen Zuhören, um die entsprechenden Ereignisse der ein-und trigger-Modell-updates. Wenn Sie möchten, prägnant, mit den Eckigen, werden Sie auch brauchen, um zu Ehrenng-model-options
.