Question

我想知道在Angular 1.5中，当你使用组件时，有一种简单的方法可以绑定一个布尔属性而不用@转换为字符串。

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

<app-menu items="menuitems">

在作为json的menuitems中的

，你有一个名为“isactive”的menuitem属性，它是一个布尔值。

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

在menuitem组件中：

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

在角度1.5以上，您可以使用<＆amp; @用于单向绑定。这两者之间的主要区别是<能够将具有原始数据类型的对象传递给组件。

isactive: '<'

Answer 2

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

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

Answer 3

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

<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中，如何将属性组件绑定为布尔值？

3 个答案: