AngularJS-Komponenten: Bindungen sind im Controller nicht definiert

Schreibe ich eine einfache Winkel-Komponente. Ich bin ein parameter übergeben wird als ein verbindliches und zeigt Ihren Wert auf dem Bildschirm. Alles Prima funktioniert: ich kann sehen, dass der parameter auf dem Bildschirm angezeigt.

Komponente:

var app = angular.module("test", []);
app.component("test", {
  bindings: {
    "contactId": "<"
  },
  controllerAs: "model",
  controller: () => {
    //output: 'contact id from controller: undefined'
    console.log(`contact id from controller: ${this.contactId}`);
  },
  template: "<div>Contact id from view: {{model.contactId}}</div>"
});

Html:

<test contact-id="8"></test>

Jedoch, wenn ich versuche, auf die Bindung von in der Steuereinheit (siehe die Konsole.Protokoll), die die Bindung Wert ist undefined. Ich verstehe nicht, wie es sein kann, verfügbar in der Ansicht, aber nicht in den controller.

Was mache ich falsch?

Hier ein plnkr illustrieren das problem.

InformationsquelleAutor der Frage fikkatra | 2016-07-26

44

Bei der Verwendung von angular - Komponenten, gibt es einen Punkt, wo der regler nicht verdrahtet wurde, bis über den internen Verknüpfung. Wenn Sie versuchen, das zu tun dieses im Konstruktor des Controllers noch nicht verbunden Bindungen. Die Komponente-API stellt ein paar life-cycle-Haken, die Sie definieren können, Feuer zu bestimmten Zeiten. Sie suchen für die $onInit Haken.

$onInit() - wird Aufgerufen, auf jedem controller nach alle Steuerungen auf ein element konstruiert worden und hatten Ihre Bindungen initialisiert (und vor der pre & post die Verknüpfung von Funktionen für die Richtlinien, die auf dieses element). Dies ist ein guter Ort, um Initialisierungs-code für Ihren controller.

pro docs - https://docs.angularjs.org/guide/component

InformationsquelleAutor der Antwort jusopi
18

Stellen Sie sicher, dass Sie Bindestriche für Bindungen in HTML und camelCase für Bindungen in Javascript.
```
app.component("test", {
  bindings: {
    "myContactId": "<"
  }
}

<test my-contact-id="8"></test>
```
Das ist, was ich immer vergessen, das zu tun.

InformationsquelleAutor der Antwort kolobok

Den Wert für contactId steht auf der $scope im controller:

var app = angular.module("test", []);
app.component("test", {
  bindings: {
    "contactId": "<"
  },
  controllerAs: "model",
  controller: ($scope) => {
    var model = $scope.model;
    alert(`contact id from controller: ${model.contactId}`);
  },
  template: "<div>Contact id from view: {{model.contactId}}</div>"
});

Link zu einer anderen version Ihrer Plunker hier.

InformationsquelleAutor der Antwort JohnnyCoder

4

Dem Stichwort diese scheint nicht zu arbeiten, mit der Pfeil-Funktion, diese funktioniert mit
```
controller: function() {
   alert('contact id from controller: ' + this.contactId);
}
```
Wenn mit den Pfeiltasten Funktion, diesescheint zu beziehen sich auf das window-Objekt, da

Einen Pfeil Funktion nicht erstellen Sie es selbst in diesem Kontext, sondern es
erfasst dieser Wert von den umschließenden Kontext

InformationsquelleAutor der Antwort Olivier Boissé

werde ich vorschlagen, einige änderungen, die Sie wirklich brauchen würde, um zu vermeiden, diese ungewöhnliche bugs.

app.component("test", {
  bindings: {
    "myContactId": "<"
  },
  controller:function(){
   var self=this;
   this.$onInit=function(){
    //do all your initializations here.
    //create a local scope object for this component only. always update that scope with bindings. and use that in views also.

       self.myScopeObject=self.myContactId
   }
  },
   template:'<p>{{$ctrl.myScopeObject}}</p>'
 }

<test my-contact-id="8"></test>

einige Punkte :

vorbei Bindungen einer Komponente in html immer ein kebab-Gehäuse, ex, mein, Kontakt-id und die zugehörige javascript-variable wird cammal cased : myContactId.
wenn Sie übergeben, wird der Wert statt das Objekt, verwenden Sie '@' in der Bindung.
wenn Sie ein Objekt, und übergeben Sie das Objekt an bindigs verwenden '<.
wenn Sie möchten, 2-Wege-Bindung an das Objekt, verwenden Sie '=' in die Bindungen config

 bindings:{
      value:'@',
      object:'<', //also known as one-way
      twoWay:'='
    }

InformationsquelleAutor der Antwort hannad rehman

1

Seine vielleicht nicht die beste Praxis, aber Sie haben eine easyer Zugriff auf diese Werte:
```
$scope.$ctrl.contactId
```
Können Sie die Bindungen in der Eigenschaft $Strg innerhalb der $scope.

Ich hoffe, dass Ihr helfen

InformationsquelleAutor der Antwort BratisLatas
0

Für diejenigen, die sich mit Richtlinien, in denen Komponenten angenommen werden, wenn Bindungen{} angegeben wird, erscheint das hinzufügen dieser gleichen Parameter Bereich{} funktioniert:
```
/*bindings: {
    modalInstance: '<',
    resolve: '<'
},*/
scope: {
    modalInstance: '<',
    resolve: '<'
},
```
*Entdeckt, nachdem ich schrieb oben, dass eine zusätzliche scope-parameter foo, das nicht auf $scope, bis ich beauftragte es von $scope.beheben. Also ich hatte dies in $scope.init(): $scope.foo = $scope.beheben.foo. Nicht sicher, warum. Vermute, es hat zu tun mit meinem UI Bootstrap Modal + Richtlinien Nutzung

Kann dies offensichtlich sein, für andere aber nicht für mich relativ neu AnguluarJS.

Mein problem war die Verwendung von Richtlinien mit UI-Bootstrap-Modals, die kompatibel sind mit den Richtlinien, sondern entwickelt und dokumentiert, die für die Verwendung mit Komponenten.

InformationsquelleAutor der Antwort Shovas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.