角度ディレクティブでブール値をバインドする方法は？

Question

私は、いくつかのブール値属性を指令にバインド/設定したいと思います。しかし、私は本当にこれを行う方法と次の動作を達成するためには分かりません。

フラグを構造体に設定したいとします。リストが折りたたみ可能であるかどうかを考えてみましょう。私は、次のHTMLコードを持っている：

<list items="list.items" name="My list" collapsable="true"></list> 

itemsがバインドさ双方向ですが、nameは、私はどちらかの値を渡すことによって、そのcollapsable属性がリストの$スコープで利用できるようにしたいだけの属性

です（真、偽または何でも）、私はいくつかのUIコンポーネントを開発していると私は彼らとの対話の複数の方法を提供したいと思い

<list items="list.items" name="{{list.name}}" collapsable="list.collapsed"></list> 

結合のいずれか2ウェイ。たぶん、時間の中には、オブジェクトのプロパティを属性に渡すことによって、そのコンポーネントの状態（折りたたまれているかどうか）を知りたい人もいます。

これを達成する方法はありますか？もし私が何かを忘れてしまったり、間違っていたら私を修正してください。

おかげ

Answer 1

は結合双方向の設定ディレクティブのスコープを作成します。

app.controller('ctrl', function($scope) 
{ 
    $scope.list = { 
     name: 'Test', 
     collapsed: true, 
     items: [1, 2, 3] 
    }; 
}); 

app.directive('list', function() 
{ 
    return { 
     restrict: 'E', 
     scope: { 
      collapsed: '=', 
      name: '=', 
      items: '=' 
     }, 
     template: 
      '<div>' + 
       '{{name}} collapsed: {{collapsed}}' + 
       '<div ng-show="!collapsed">' + 
        '<div ng-repeat="item in items">Item {{item}}</div>' + 
       '</div>' + 
       '<br><input type="button" ng-click="collapsed = !collapsed" value="Inside Toggle">' + 
      '</div>' 
    }; 
}); 

は、次に属性としてのオプションを渡す：

<list items="list.items" name="list.name" collapsed="list.collapsed"></list> 

http://jsfiddle.net/aaGhd/3/

Answer 2

文字列を渡すことはできませんtrueまたはfalseを属性値として使用し、双方向バインディングの属性値としてlist.collapsedなどのスコーププロパティを渡すこともサポートしています。あなたはどちらか一方の方法を選ぶ必要があります。

これは、分離スコープを使用する場合、ディレクティブ内の属性の値を解釈する方法を1つしか指定できないためです。

私はあなたがあなたのdiretiveで=を使用し、またattrs.collapsableがtrueまたはfalseに設定されている場合は、あなたのリンク機能でチェックすることができたとします、二を使用し、もしそうなら、あなたはブール値が渡された知っているし、そうでない場合双方向データバインディング。しかし、これはハッキーです。

Answer 3

私はこれについて1年遅れていることは知っていますが、実際にはリンク機能（https://docs.angularjs.org/guide/directive）を使用してこれを行うことができます。署名は次のようになります。

function link(scope, element, attrs) { ... } 

attrsにオブジェクトが渡された生の値を記入されることをあなたが言うことができそうだとすれば（attrs.collapsed ==「真」）{...}またはそのようないくつかの。

Answer 4

あなたはこのようなブール値のために、独自の1ウェイデータバインディングの動作を設定することができます

link: function(scope, element, attrs) { 

    attrs.$observe('collapsable', function() { 

     scope.collapsable = scope.$eval(attrs.collabsable); 
    }); 

} 

$ここで観察する使用すると、あなたが「見て」のみ変更する属性の影響を受けているとあれば影響されないことを意味しますディレクティブの$ scope.collapsableを直接変更する必要がありました。。角1.3 attrsにあるため

Answer 5

$観察するには、未定義の属性についても、トリガーのようですので、あなたは、未定義の属性を考慮してほしい場合は、あなたのような何かをする必要があります：2ウェイなどの属性を設定

link: function(scope, element, attrs) { 
    attrs.$observe('collapsable', function() { 
     scope.collapsable = scope.$eval(attrs.collapsable); 
     if (scope.collapsable === undefined) { 
     delete scope.collapsable; 
     } 
    }); 
    },