В Angular 1.5, как связать компонент атрибута как boolean?

Я хотел бы знать, есть ли в Angular 1.5, когда вы используете компоненты, простой способ связать атрибут, который является логическим без преобразования в строку с @.

например, у меня есть два компонента "app-menu" и "app-menuitem" без трансклюдии. "app-menu "имеет только один атрибут-это список элементов для создания"app-menuitem".

<app-menu items="menuitems">

в menuitems, который является json, у вас есть атрибут menuitem с именем "isactive", который является логическим значение.

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

в компоненте меню :

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

Я не знаю, лучший способ быть уверенным в конце-это реальное логическое, а не строка, которая делает меня некоторыми ошибками. У кого какие идеи ?

10
angularjs angularjs-components angularjs-directive binding components

3 ответов

в angular 1.5 и далее вы можете использовать < & @ для односторонней привязки. Основная разница между этими двумя является < имеет возможность передать объект с его исходным типом данных компоненту.

isactive: '<'
16

просто используйте одностороннюю привязку вместо привязки строки:

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

< заставляет вас использовать true и false для ваших значений атрибутов, которые не совсем похожи на HTML. Например, мы часто пишем:

<input type="text" disabled>

вместо

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

чтобы продолжить делать это с вашими компонентами AngularJS, вы можете использовать @ связывание с parse-string-boolean (или похожие) в $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>
2