bindet ngModel an eine benutzerdefinierte Anweisung
Ich arbeite jetzt seit einer Woche an diesem Thema, und ich kann mich nicht um die ganze Sache mit der Richtlinie kümmern. Ich habe viele Beiträge gelesen ...
ein paar Videos ...
Und durch StackOverflow und andere Foren (Links folgen) gehofft, dass etwas in sich versinken wird ... Ich denke, dass das Problem, auf das ich gestoßen bin, dass ich VERSTEHEN will warum / wie diese arbeiten, damit ich nicht geschnitten werde / die Lösung von jemand anderem in meinen Code einfügen, aber dann später erneut fragen, wenn etwas anderes auftaucht, weil ich nicht weiß, was mein eingefügter Code tut.
Ich finde jedoch, dass jeder eine andere Art hat, diese Katze zu häuten, und keiner von ihnen scheint mit meinem Verständnis davon, wie das funktionieren soll, übereinzustimmen.
Ich versuche, ein Formular mithilfe der UI-CSS-Bibliothek zu erstellen. Ich dachte, ich würde mit einer einfachen Textbox beginnen. yep ... nur ein einfaches Textfeld. Eine Metro-UI-Textbox hat einige schöne eingebaute Funktionen, die ich beibehalten wollte, also dachte ich, das wäre ein guter Anfang.
Ich habe gelesen, dass ich, um Metro-UI-Verhalten mit AngularJS zu nutzen, es in eine benutzerdefinierte Richtlinie ( Benutzerdefinierte Daten Direktiven innerhalb einer AngularJS ng-Wiederholung ). Während dieses Beispiel nicht genau das war, was ich suchte, schien es leicht zu erklären, was ich tun musste. Rufen Sie einfach die Funktion auf, die das Verhalten in der LINK-Funktion der Direktive anwendet, und fügen Sie das directive-Attribut dem Eingabeelement ...
hinzuAlso habe ich eine Anweisung namens "metroInputTransform" erstellt und sie als Attribut einem Eingabeelement hinzugefügt.
%Vor%In der LINK-Funktion der Direktive habe ich einfach die Methode aufgerufen, die das gesuchte Verhalten anwendet. Ich weiß, dass dies ein wenig ausführlicher ist, als es sein muss, aber ich versuche es zu lernen, also gehe ich so gut ich kann durch. ... (für den vollständigen Code siehe diese Geige )
%Vor%Das hat also teilweise funktioniert. Es hat das Look-and-Feel von Metro und das zugehörige Verhalten erzeugt, aber ... ngModel war nicht an das Element gebunden. So begann dies eine lange Reise durch Konzepte wie isolieren Bereich, Ausbrechen der verschiedenen Kompilierung, Controller, Pre-Link-, Post-Link-Funktionen, mindestens zwei verschiedene Möglichkeiten, ngModel persistent zu bleiben ... von denen alle nicht funktioniert.
Nach einer Vielzahl von Lesevorgängen wurde mir klar, dass die DOM-Manipulation in der COMPILE-Funktion stattfinden sollte, damit alle DOM-Transformationen für die Kompilierungs- und Verknüpfungsschritte des Digest-Prozesses verfügbar sind. Also habe ich den Aufruf von inputTransform () in die COMPILE-Funktion ... ( Geige ) verschoben
%Vor%Kein Glück ... dasselbe ... nicht an ngModel bindend. Also habe ich das Konzept "isolate scope" entdeckt ...
- Isolate Scope verstehen - Video
- Isolate-Bereiche in Richtlinien verwenden - Video
- Verwenden von ngModel mit Isolate Scope
Gestützt darauf habe ich folgende ( Geige ) versucht ...
%Vor%Keine Änderung ...
Ich habe einige andere Dinge ausprobiert, habe aber Angst, dass ich dich bald verlieren könnte, wenn ich es nicht schon getan habe. Das nächste, was ich bekam, war die Ein-Weg-Bindung, die etwas wie unten tut ... und selbst hier können Sie sehen, dass die Extraktion der ngModel-Referenz absolut inakzeptabel ist. ( Geige )
%Vor%Ich bin erschöpfte und habe absolut keine Ahnung, was noch zu versuchen ist. Ich weiß, dass dies eine Frage meiner Unwissenheit und meines mangelnden Verständnisses dafür ist, wie / warum AngularJS so funktioniert, wie es funktioniert. Aber jeder Artikel, den ich lese, lässt mich fragen so viele Fragen beantworten, wie beantwortet wurden, oder bringt mich in ein Kaninchenloch, in dem ich mehr verloren bin, als ich war, als ich anfing. Abgesehen davon, dass ich bei Live-Präsenzseminaren, die ich mir nicht leisten kann, wo ich die Fragen stellen kann, die ich beantworten muss, 3000 Dollar fallen lasse, bin ich mit Angular völlig am Ende.
Ich wäre sehr dankbar, wenn jemand Anleitung geben könnte, eine Richtung ... eine gute Ressource ... alles, was dazu beitragen könnte, etwas Licht in dieses Thema zu bringen, aber alles, was mir helfen könnte, meine Räder nicht mehr zu drehen. In der Zwischenzeit werde ich weiterhin alles lesen und wieder lesen, was ich finden kann, und hoffentlich wird etwas kaputt gehen.
Danke
G
UPDATE - 30.10.2014
Ich bin soooo über dieses Thema, möchte es aber durchgehen. Ich brauche und will das lernen. Ich möchte auch wirklich meine Wertschätzung für die Bemühungen ausdrücken, die die Leute in diese Sache gesteckt haben, und während sie einige Lösungen vorgestellt haben, die letztendlich der beste Weg sein können, haben sie beide das Thema umgangen, was ich versuche, das zu nutzen Verhalten, die mit der Metro UI CSS-Bibliothek bereitgestellt werden. Ich würde es vorziehen, sie, wenn möglich, nicht neu schreiben zu müssen.
Beide Lösungen, die bisher zur Verfügung gestellt wurden, haben die Schlüsselaussage aus der Lösung eliminiert ... welche Zeile ...
ist %Vor%Ich möchte nicht das gesamte jQuery-Widget, das die "inputTransform" -Definition enthält, posten, aber ich schneide es heraus und füge es hier ein ...
%Vor%Also habe ich die Direktive als Attribut angewendet, weil der Metro-Code, der dahinter steht, die Textbox KLONEN möchte (was bei einer Elementrichtlinie nicht der Fall wäre) und dann das ursprüngliche Eingabeelement ENTFERNT. Es erstellt dann die neuen DOM-Elemente und umschließt das geklonte Eingabeelement im neu erstellten DIV-Container. Der Haken ist, glaube ich, dass ... die Bindung unterbrochen wird, wenn das ursprüngliche Element geklont und aus dem DOM entfernt wird. Sinnvoll, wenn die Attributierung "ng-model" an eine Referenz der Textbox gebunden ist. Die Erwartung, die ich ursprünglich hatte, war, da das "ng-Modell" -Attribut zusammen mit dem Rest des Elements geklont wurde, dass in der Kompilier-Ereignis / -Funktion / -Phase der Direktive die Referenz zu der neu (re) etabliert werden würde erzeugtes Eingabeelement Dies war offensichtlich nicht der Fall. Sie können in dieser aktualisierten Geige sehen, dass ich einige Versuche unternommen habe, das ng-Modell wieder mit den neuen DOM-Elementen zu verbinden Kein Erfolg.
Vielleicht ist das unmöglich ... es scheint, dass es einfach der einfachste Weg ist, diese Dinge neu zu bauen.
Danke nochmal Mikko Viitalia und 'azium' ...
2 Antworten
Richtlinien sind nicht die einfachsten Konzepte gibt und Dokumentation ist wirklich nicht so gut und es um die interwebs verstreut wird.
kämpfte ich mit compile , pre-compile und so, wenn ich versuchte, meine ersten Richtlinien zu schreiben, aber bisher habe ich nie gebraucht, diese Funktionen. Vielleicht liegt es an meinem Unverständnis, aber trotzdem ...
Wenn ich mir Ihre Beispiele ansehe, sehe ich, dass es einige grundlegende Dinge gibt, die geklärt werden müssen. Zunächst würde ich Ihre Anweisung auf E lement beschränken, da sie das Steuerelement in HTML ersetzt. Ich würde A tribute z. um dem vorhandenen Steuerelement Funktionalität hinzuzufügen.
Es gibt eine (obligatorische) Namenskonvention, bei der Sie in HTML und camel casing in Ihrem JavaScript eine gestrichelte Benennung verwenden. So wird something-cool zu somethingCool . Wenn Sie Variablen an den Geltungsbereich von Direktive "binden", gibt es einen großen Unterschied bei der Vorgehensweise. Mit = binden Sie die Variable an die Variable @ an die Variablen evalued (string). Also zuerst erlaubt die "Zwei-Wege-Bindung" aber letzteres natürlich nicht. Sie können auch & verwenden, um an den Ausdruck / die Funktion des übergeordneten Bereichs zu binden.
Wenn Sie z.B. plain = Dann erwartet der Bereich der Direktive denselben Namen in Ihrem HTML. Wenn Sie einen anderen Namen verwenden möchten, fügen Sie den Variablennamen nach dem = hinzu. Ein Beispiel
habe ich die Freiheit erste Fiddle metro-input-transform als Ausgangspunkt zu nehmen und es in Plunker neu schreiben . Ich versuche es hier zu erklären (und hoffe ich habe dich richtig verstanden).
Metro-Eingangsanweisung
%Vor% Richtlinie erwartet ngModel zu binden und watermark zu zeigen, wenn ngModel keinen Wert hat (Texteingabe leer ist). Inside link Ich habe clear() function eingeführt, die in der Direktive verwendet wird, um ngModel zurückzusetzen. Wenn der Wert zurückgesetzt wird, wird watermark angezeigt. Ich habe die HTML-Teile in eine separate Datei, metro-template.html, getrennt.
Metro-Eingabe-HTML-Vorlage
%Vor% Hier binden wir ngModel an Eingabe und weisen placeholder zu. Die Schaltfläche [X] ist an clear() method gebunden.
Wenn wir nun unsere Direktive eingerichtet haben, ist hier die HTML Seite, die es benutzt.
HTML-Seite
%Vor%Im obigen Beispiel ist die Verwendung der Metro-Direktive wie folgt. Dies wird durch die HTML-Vorlage der Direktive ersetzt.
%Vor% Der andere Eingang hat detect-mouse-over Richtlinie angewandt wird, beschränkt A ttribute nur Verwendungen zeigen / Unterschiede zwischen A und E . Die Mauserkennungs-Anweisung bewirkt, dass die Eingabe die Hintergrundfarbe ändert, wenn die Maus über / aus der Maus bewegt wird.
.
%Vor% Es hat auch die gleiche ng-model , um Änderungen zwischen den Steuerelementen zu spiegeln.
In Ihrem Beispiel hatten Sie auch ein productService , das den Wert für die obigen Eingabesteuerelemente lieferte. Ich schrieb es als
Produktservice
%Vor% So get() function erhält nur den hartcodierten Wert, aber es zeigt immer noch die Verwendung von Diensten. Controller namens Ctrl ist wirklich einfach. Wichtiger Teil hier ist, dass Sie daran denken, alle Dienste und solche in Ihren Controller zu injizieren. In diesem Fall ist angular $scope und unser eigenes productService .
Controller
%Vor%
Hier ein Screenshot der obigen Lösung.
Wenn Sie den Wert eines der Eingänge ändern, ändert sich der Wert von beiden. Input unten hat "mouseover", also ist es gräulich, mouseout würde es wieder weiß machen. Durch Drücken von [X] wird der Wert gelöscht und der Platzhalter sichtbar gemacht.
Hier ist der Link zu bottle noch einmal Ссылка
Ok, ich bin mir nicht ganz sicher, welche anderen Vorteile von der Metro UI du bekommst, aber hier ist eine einfache Geige, die deine Direktive überhaupt nicht braucht, um zu erfassen, was du in deiner ersten Geige für mich hattest. Ссылка
%Vor%Die zweite Geige, die Sie gepostet haben, Ссылка , ist ziemlich komisch für mich, weil es Ihnen nicht ähnlich erscheint möchte, dass das zweite Eingabefeld dasselbe Modell ist wie das erste. Es scheint so, als ob Sie mit dem Klicken auf die Schaltfläche x den Wert der ersten Eingabe der zweiten zuweisen möchten. Das macht viel mehr Sinn.
%Vor%Tags und Links javascript html angularjs angularjs-directive angularjs-scope