在Angular 1.5中，如何将属性组件绑定为boolean？

Question

我想知道在 Angular 1.5 中，当您使用组件时，是否有一种简单的方法来绑定一个布尔值属性，而无需使用 @ 将其转换为字符串。

例如，我有两个组件 "app-menu" 和 "app-menuitem" 没有嵌入。 "app-menu" 只有一个属性是要创建的项目列表 "app-menuitem"。

<app-menu items="menuitems">

在 json 的菜单项中，您有一个名为 "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'
    });

我不知道最好的方法来确保最后是一个真正的布尔值，而不是一个让我产生一些错误的字符串。有人有想法吗？

Answer 1

只使用单向绑定而不是字符串绑定：

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

Answer 2

从 angular 1.5 开始，您可以使用 < & @ 进行单向绑定。这两者之间的主要区别是 < 能够将具有原始数据类型的对象传递给组件。

isactive: '<'

Answer 3

< 强制您使用 true 和 false 作为您的属性值，这并不完全是 HTML-like。比如我们经常写：

<input type="text" disabled>

而不是

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

要继续对 AngularJS 组件执行此操作，您可以在 $onChanges:

中使用 @ 与 parse-string-boolean（或类似）的绑定

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>

在Angular 1.5中，如何将属性组件绑定为boolean？

In Angular 1.5, how to bind an attribute component as boolean?

binding

components

angularjs

angularjs-directive

angularjs-components