Composants AngularJS: les liaisons ne sont pas définies dans le contrôleur

Question

Je suis en train d'écrire un simple angulaire de la composante. Je suis de passage d'un paramètre de liaison et d'afficher sa valeur sur l'écran. Tous fonctionne bien: je peux voir le paramètre affiché sur l'écran.

Composant:

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>

Cependant, lorsque j'essaie d'accéder à la liaison dans le contrôleur (voir la console.journal), la liaison de la valeur est undefined. Je ne comprends pas comment il peut être disponible dans la vue, mais pas dans le contrôleur.

Ce que je fais mal?

Voici un plnkr illustrant le problème.

Answer 1

Lors de l'utilisation angulaire de composants, il est un point où le contrôleur n'a pas été câblé par l'interne de liaison. Si vous essayez de le faire dans le constructeur de votre contrôleur, vous n'avez pas été liée à des liaisons. L'API du Composant expose quelques du cycle de vie des crochets que vous pouvez définir que le feu des à certains moments. Vous êtes à la recherche pour l' $onInit crochet.

$onInit() - Appelée sur chaque contrôleur après tous les contrôleurs sur un élément ont été construits et ont eu leurs liaisons initialisé (et avant la pré & post reliant les fonctions pour les directives sur cet élément). C'est un bon endroit pour mettre le code d'initialisation pour votre contrôleur.

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

Answer 2

Assurez-vous d’utiliser des tirets pour les liaisons en HTML et camelCase pour les liaisons en Javascript.

 app.component("test", {
  bindings: {
    "myContactId": "<"
  }
}

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

C'est ce que j'oublie toujours de faire.

Answer 3

La valeur pour contactId est disponible sur le $scope de votre contrôleur:

 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>"
});
 

Lien vers une autre version de votre Plunker ici .

Answer 4

Le mot clé cela ne semble pas fonctionner avec la fonction flèche, cela fonctionne avec

 controller: function() {
   alert('contact id from controller: ' + this.contactId);
}
 

Lorsque vous utilisez la fonction flèche, ceci semble faire référence à l’objet window car

Une fonction de flèche ne crée pas son propre contexte, elle capture plutôt la valeur this du contexte

Answer 5

je vais proposer quelques modifications dont vous avez vraiment besoin pour éviter ces inhabituelle de 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>

certains points :

1. en passant les liaisons d'un composant dans le html est toujours kebab tubé mon ex-contact-id et ses variable javascript sera cammal tubé : myContactId.

2. si vous êtes de passage à la valeur de la place de l'objet, utiliser un '@' dans les liaisons. si vous utilisez un objet et le passage de l'objet à bindigs utiliser '<. si vous souhaitez 2 voies de liaison à l'utilisation des objets '=' dans les liaisons config

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