web-dev-qa-db-ja.com

Angular 1.5では、属性コンポーネントをブール値としてバインドする方法は？

Angular 1.5の場合、コンポーネントを使用するときに、ブール文字列である属性を@で文字列として変換せずにバインドする簡単な方法があります。

たとえば、トランスクルードなしの2つのコンポーネント「app-menu」と「app-menuitem」があります。 「app-menu」には「app-menuitem」を作成するための項目のリストがある属性が1つだけあります。

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

最後に確認する最善の方法は本当のブール値であり、バグを引き起こす文字列ではありません。誰かがアイデアを持っていますか？

angularjsangularjs-directivebindingcomponentsangularjs-components
13
J.BizMai

angular 1.5以降では、<＆@一方向バインディング。これら2つの主な違いは<は、元のデータ型のオブジェクトをコンポーネントに渡すことができます。

isactive: '<'
23
Pankaj Parkar

文字列バインディングの代わりに一方向バインディングを使用するだけです：

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

<は、属性値に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>
3
Steven Vachon