AngularJS 1.4 directives: champ d'application, une liaison bidirectionnelle et bindToController

Mise à jour: Il doit avoir été quelque chose de stupide dans une autre partie du code. Il travaille maintenant, de sorte que le bindToController syntaxe est très bien.

Nous sommes en utilisant AngularJS 1.4, qui a introduit un nouvelle façon d'utiliser bindToController dans les directives.

Après un peu de lecture (et peut-être de ne pas tout comprendre), nous avons défini notre directive comme ceci:

  .directive('mdAddress', function mdAddress() {
    var directive = {
      restrict: 'EA',
      scope: {},
      bindToController: {
        address: '='
      },
      templateUrl: 'modules/address/address.html',
      controller: AddressController,
      controllerAs: 'dir'
    };

De l'appeler à partir d'un autre point de vue comme ceci:

  <md-address address="vm.address"></md-address>

Ayant préalablement définies dans la vue contrôleur:

  vm.address = {
    street: null,
    countryCode: null,
    cityCode: null,
    postalCode: null
  };

Référencer les variables dans la directive modèle comme celui-ci:

  <md-input-container>
    <label>{{'ADDRESSNUMBER' | translate}}</label>
    <input type="number" ng-model="dir.address.streetNumber">
  </md-input-container>

Nous avons passé 4h à essayer de comprendre pourquoi notre directive n'a pas de travail. Eh bien, c'était du travail, mais dans les deux sens de la liaison entre le contrôleur et la directive n'a pas été, vm.address.street était complètement nulles.

Après un certain temps, nous avons juste essayé à l'ancienne:

  .directive('mdAddress', function mdAddress() {
    var directive = {
      restrict: 'EA',
      scope: {
        address: '='
      },
      bindToController: true,
      templateUrl: 'modules/address/address.html',
      controller: AddressController,
      controllerAs: 'dir'
    };

Et la magie a fonctionné. Toute idée POURQUOI?

Qu'avez-vous dans votre modules/address/address.html modèle? Si vous essayez de référence vm à tous dans le modèle, puis que serait la cause d'un problème de null depuis vm n'existe pas dans le champ d'application de la directive. Aussi, si vous essayez juste de les lier à des address dans la directive modèle, qui n'existent pas en tant que vous êtes à la liaison de votre contrôleur dir, de sorte qu'il devrait être dir.address
Dans le modèle que nous avons référencé les éléments avec dir: <input type="number" ng-model="dir.address.streetNumber">. J'ai édité le poste principal pour clarifier cela. Merci.
S'il vous plaît, fournir deux plunkers, pour les deux cas. Il est simple explication à cela, mais il est évident que le texte ne donne pas une idée claire de ce que vous avez fait exactement.
J'ai rencontré un problème similaire de pré-mise à 1,4+. Aucune chance d'émission d'origine est toujours référencement ancienne version Angulaire?
Hmm, c'est une possibilité, mais je suis sûr que nous avons changé l'angle de version avant de les essayer. Difficile à dire maintenant 🙂

OriginalL'auteur LeoLozes | 2015-08-06

19

Mise à jour:

Grâce à la référence pour ce blog, j'ai besoin de mettre à jour ma réponse. Depuis AngularJS 1.4, il semble vraiment, que vous pouvez utiliser
```
scope: {},
bindToController: {
  variable: '='
}
```
qui va faire la (les) même chose que l'ancienne syntaxe:
```
scope: {
  variable: '='
},
bindToController: true
```
L'utile lignes de la AngularJS code source pour expliquer ce comportement:
```
if (isObject(directive.scope)) {
  if (directive.bindToController === true) {
    bindings.bindToController = parseIsolateBindings(directive.scope,
                                                     directiveName, true);
    bindings.isolateScope = {};
  } else {
    bindings.isolateScope = parseIsolateBindings(directive.scope,
                                                 directiveName, false);
  }
}
if (isObject(directive.bindToController)) {
  bindings.bindToController =
      parseIsolateBindings(directive.bindToController, directiveName, true);
}
```
Source: AngularJS 1.4.0

Réponse originale à cette question:

Je l'espère, je peux vous expliquer pourquoi ce comportement vous connu est correcte et si vous n'avez missunderstand le concept de portée contraignante.

Laissez-moi vous expliquer, ce que vous avez fait dans votre premier extrait de code:
```
.directive('mdAddress', function mdAddress() {
    var directive = {
      restrict: 'EA',
      scope: {},
      bindToController: {
        address: '='
      },
      templateUrl: 'modules/address/address.html',
      controller: AddressController,
      controllerAs: 'dir'
    };
```
Avec scope: {}, vous avez créé un isolé portée (sans héritage) pour votre mdAddress directive. Que signifie: Pas de transmission des données entre le contrôleur de parent et votre directive.

Ayant ceci à l'esprit, au sujet de votre deuxième extrait de code:
```
<md-address address="vm.address"></md-address>
```
vm.address de votre parent contrôleur/vue sera affecté comme expression de l'attribut d'adresse de la directive, mais comme vous avez défini un isolé portée avant, les données ne sont pas transmises dans AddressController et ne sont donc disponibles dans la bindToController valeur.

Pensons à la scope définition de l'objet que l' "dont les données seront transmises dans" et la bindToController comme la "quelles données seront disponibles, à mon avis, est controllerAs objet".

Donc, maintenant, nous allons jeter un oeil à la dernière (et de travail de l'extrait de code):
```
.directive('mdAddress', function mdAddress() {
    var directive = {
      restrict: 'EA',
      scope: {
        address: '='
      },
      bindToController: true,
      templateUrl: 'modules/address/address.html',
      controller: AddressController,
      controllerAs: 'dir'
    };
```
Il vous a créé un isolé portée, trop, mais cette fois vous avez ajouté l' address attribut pour être transmis sous la forme d'une expression. Alors maintenant, la address vous transmis à partir de la vue dans le deuxième extrait sera disponible dans le contrôleur. Réglage bindToController: true maintenant, imposera à l'ensemble de la portée actuelle des propriétés du contrôleur (ou, plus probablement, le controllerAs objet). Et maintenant, il fonctionne comme vous le souhaitez, parce que les données seront transmises à la portée et les données seront transmises à l'automate du modèle de portée.

N'a qu'un bref aperçu vous aider à mieux comprendre le concept de la scope et bindToController définition des objets?

Merci beaucoup pour votre réponse! Il a un sens, et je comprends tout à fait la deuxième partie de votre explication, mais la première partie semble dire littéralement à l'opposé de l'article que j'ai lié (à propos de la nouvelle bindToController de fonctionnalité). Spécialement quand il dit "Cela signifie que nous pouvons nous déplacer à notre portée: { nom: '=' } exemple de liaison à l'échelle de la rendre plus explicite l'isoler les liaisons sont en fait hérité et lié à la manette", et remplacescope: {name: '='}, bindToController: true avec scope: {}, bindToController: {name: '='}.
En effet, merci pour votre réponse. Vous avez raison, j'ai besoin de revenir parties à ma réponse. La ligne importante est celle de la AngularJS code source mentionné dans l'article - si le comportement doit être le même dans les deux cas. Alors peut-être vous avez vraiment eu certains bug étrange/faute de frappe dans votre code? Ou pouvez-vous reproduire le tout à partir de votre question? Sujet très intéressant!
Merci, je pensais que j'étais peut-être mal compris l'article :). De toute façon, l'examen de la AngularJS code, se pourrait-il que scope: {} retourne isObject comme vrai, car il est un objet vide, pas null? Ensuite, il entrera dans la première partie de la ifphrase ... j'ai vérifié le AngularJS code source pour isObject mais je ne suis pas sûr ...
Oui, vous avez raison, le premier si la condition sera vraie dans le cas (comme {} est en effet un objet). À l'intérieur de ce cas, la branche else sera déclenchée. Mais la deuxième extérieur si la condition sera également évaluée à vrai directive.bindToController est aussi un objet dans votre premier extrait de code. Donc bindings.bindToController et bindings.isolateScope sera rempli. Ne sais pas encore si cela pourrait aller dans l'un de ces problèmes que vous avez eu. Il serait vraiment intéressant de savoir si vous pouvez reproduire le problème?!
"Le fait qu'un bref aperçu vous aider à mieux comprendre le concept de la portée et de la bindToController définition des objets?" Assurez-vous fait pour moi!

OriginalL'auteur ConcurrentHashMap

Vous devez vous connecter pour publier un commentaire.