Dans Angulaire de 1,5, comment faire pour lier un attribut de composant comme booléenne?

Je voudrais savoir si dans Angulaire de 1,5, lorsque vous utilisez des composants, il existe un moyen simple de lier un attribut qui est un booléen sans être converti en chaîne de caractères avec @.

Par exemple, j'ai deux composants "app-menu" et "app-menuitem" sans transclude. "app-menu" n'a qu'un seul attribut est une liste d'articles à créer "app-menuitem".

<app-menu items="menuitems">

dans les menuitems qui est un json, vous avez un attribut par menuitem nommé "est actif" qui a une valeur booléenne.

$scope.menuitems = [{ label : 'menuitem 1', isactive : true},{ label : 'menuitem 1', isactive : false}]

Dans le menuitem composant :

angular.module('app')
    .component('appMenuitem', {
      transclude: false,
      controller: menuitemController,
      bindings: {
        label: '@',  
        isactive: '@' //<--- The problem is here because the boolean is converted as string
      },
      templateUrl: 'angular/components/simple/menuitem/menuitem.html'
    });

Je ne sais pas la meilleure façon d'être sûr qu'à la fin, c'est un réel booléen, pas une chaîne qui me fait de quelques bugs. Quelqu'un a une idée ?

OriginalL'auteur J.BizMai | 2016-04-16

  1. 17

    Angulaire 1.5, vous pouvez utiliser < & @ d'un moyen de liaison. Le principal differnece entre ces deux est < a la capacité de faire passer un objet de type de données d'origine des composants.

    isactive: '<'

    OriginalL'auteur Pankaj Parkar

  2. 5

    Suffit d'utiliser un moyen de liaison à la place d'une chaîne de liaison:

    angular.module('app')
    .component('appMenuitem', {
      transclude: false,
      controller: menuitemController,
      bindings: {
        label: '@',  
        isactive: '<'
      },
      templateUrl: 'angular/components/simple/menuitem/menuitem.html'
    });

    OriginalL'auteur Joe Clay

  3. 2

    < vous oblige à utiliser true et false pour vos valeurs d'attribut, ce qui n'est pas entièrement en HTML. Par exemple, nous avons souvent écrire:

    <input type="text" disabled>

    au lieu de

    <input type="text" disabled="disabled">

    Continuer à faire cela avec votre AngularJS composants, vous pouvez utiliser un @ liaison avec parse-chaîne-boolean (ou similaire) en $onChanges:

    bindings: {
  paramSomething: '@something'
}

    ,

    function $onChanges(changes) {
  if (changes.paramSomething) {
    switch (typeof this.paramSomething) {
      case 'string': {
        this.isSomething = parseBoolean(this.paramSomething, true);
        break;
      }
      case 'undefined': {
        this.isSomething = false;
        break;
      }
    }
  }

    ,

    <my-component something></my-component>

    OriginalL'auteur Steven Vachon