web-dev-qa-db-ja.com

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

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

フラグを構造に設定したいと想像してください。リストが折りたたみ可能かどうかを考えてみましょう。次のHTMLコードがあります。

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

itemsは双方向にバインドされ、nameは単なる属性です

collapsable属性がリストの$ scopeで値（true、falseなど）、双方向バインディングのいずれかを渡すことで利用できるようにしたい

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

私はいくつかのUIコンポーネントを開発していますが、それらと対話する複数の方法を提供したいと思います。おそらく、一部の人は、オブジェクトのプロパティを属性に渡すことで、そのコンポーネントの状態（折りたたまれているかどうか）を知りたいと思うでしょう。

これを達成する方法はありますか？誤解したり、間違っている場合は、修正してください。

ありがとう

angularjsangularjs-directiveangularjs-scope
30
Chris X

次のようなブール値に対して、独自の1方向データバインディング動作を構成できます。

link: function(scope, element, attrs) {

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

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

}

ここで$ observeを使用すると、ディレクティブ内の$ scope.collapsableを直接変更しても、「ウォッチ」は属性の変更の影響のみを受け、影響を受けません。

26
bingles

双方向バインディングを設定するディレクティブにスコープを作成します。

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/

8
noj

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

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

ダイレティブで=を使用でき、attrs.collapsableがtrueまたはfalseに設定されているかどうかもリンク関数でチェックできると思います。ブール値が渡され、そうでない場合は、双方向のデータバインディングを使用します。しかし、これはハッキーです。

5
Mark Rajcok

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

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

このattrsオブジェクトには、渡された未加工の値が入力されます。したがって、if（attrs.collapsed == 'true'）{...}またはそのようなものと言えます。

2
Brandon Prudent

Angular 1.3 attrs。$ observeは未定義の属性に対してもトリガーするようです。そのため、未定義の属性を考慮したい場合は、次のようにする必要があります。

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