Übergabe ngModel an AngularJS Komponente

Question

Ich versuche, eine benutzerdefinierte Formularkomponente zu erstellen, die ich ng-model verwenden kann, um zu binden. Ich habe viele Tutorials dazu gefunden, wie man das mit Direktiven macht, aber ich kann nicht herausfinden, wie man es mit Komponenten macht, da man keine link Funktionen mit Komponenten haben kann und versuchen, die ngModel Abhängigkeit zu übergeben diese this und versuchte

Error: [$injector:unpr] Unknown provider: $ngModelProvider <- $ngModel 

ich auch gesehen habe: die Controller führt zu diesem Fehler

bindings: { 
    value: "=ngModel" 
} 

habe ich versucht, und dann wird der Wert für zwei-Wege-Bindung in der Steuerung einstellen, aber es doesn Es scheint nicht zu funktionieren.

Answer 1

Dies ist ein häufiges Missverständnis mit Komponenten in Angular. Komponenten sollten Daten nicht außerhalb ihres eigenen Bereichs ändern. Also, wenn Sie dies tun wollen, sollten Sie wirklich eine Richtlinie verwenden. Hier

ist ein Zitat aus den documentation:

Components only control their own View and Data: Components should never modify any data or DOM that is out of their own scope. Normally, in Angular it is possible to modify data anywhere in the application through scope inheritance and watches. This is practical, but can also lead to problems when it is not clear which part of the application is responsible for modifying the data. That is why component directives use an isolate scope, so a whole class of scope manipulation is not possible.

Answer 2

Ich denke, der Winkel empfohlene Weg, Rückrufe zu tun (wie ngclick zum Beispiel) ist die Methode Bindungstyp zu verwenden: &

Hier ist ein Plunkr-Beispiel: https://plnkr.co/edit/nySL4OoMpJPkGXX8j78U?p=preview

Beachten Sie diesen Teil, die Methode Bindungstyp definiert ist, und die InternalChange-Funktion führt w hatever eckigen Ausdruck wird vom Eltern/Anrufer zur Verfügung gestellt.

bindings: { 
     valueChanged: '&?' 
    }, 
    controller: function() { 
     this.$onInit = function() { 
      this.value = 'initial value'; 
     }; 
     this.internalChange = function() { 
      if (this.valueChanged) { 
       this.valueChanged({ $value: this.value}); 
      } 
     }; 
    } 

Und dann sind hier 2 Wege von vielen, um die Ausdrücke zu verwenden, notieren $ Wert wie von der Komponente definiert.

<my-comp data-value-changed="$ctrl.someFunction($value)"></my-comp> <br 
<my-comp data-value-changed="$ctrl.someProperty = 'Bla: ' + $value"></my-comp> 

Ich habe versucht, es einzurichten, um eine Vielzahl von Dingen zu zeigen.

1. Die Methodenbindung nimmt einen Winkelausdruck an. Ich habe 2 Beispiele, eines ruft eine Funktion auf dem übergeordneten Controller, das andere eine Eigenschaft

2. Dieser Ausdruck wird mit dem Bereich des übergeordneten/Aufrufers ausgeführt (dh: hat Zugriff auf Eltern-Controller-Eigenschaften, Funktionen usw.). .)

3. die Komponente ist derjenige, der es durch die Ausführung des Bindungs ​​Namen als Funktion

4. die Komponente, die eine Karte von Schlüssel/Wert ruft zur Verfügung stellen kann, wo der Schlüssel eine benannte Eigenschaft ist, die verwendet werden können, durch den Aufrufer ($ Wert in meinem Beispiel)

Dies ist eine gute Lösung, solange Sie mit der Komponente OK sind, die Aktualisierungen an das übergeordnete Element "pusht". Wenn Sie z. B. nur zu einem bestimmten Zeitpunkt die Daten von der Komponente abrufen wollten (möglicherweise aufgrund von Zeit- oder Speicherbeschränkungen), gibt es viele andere Lösungen für dieses Problem.

Hoffe, das hilft!