1. ホーム
  2. javascript

[解決済み] Angular.jsのattributeディレクティブに複数の属性を渡すには?

2022-09-30 18:31:27

質問

以下のように制限された属性ディレクティブがあります。

 restrict: "A"

数値と関数/コールバックの二つの属性を渡す必要があり、ディレクティブ内で attrs オブジェクトを使ってアクセスします。

ディレクティブが要素ディレクティブであった場合は "E" これにすることができました。

<example-directive example-number="99" example-function="exampleCallback()">

しかし、ここでは説明しない理由により、このディレクティブは属性ディレクティブである必要があります。

attribute ディレクティブに複数の属性を渡すには?

どのように解決するのですか?

ディレクティブは、ディレクティブ自身が要素でない場合でも、同じ要素に定義されている任意の属性にアクセスすることができます。

テンプレートです。

<div example-directive example-number="99" example-function="exampleCallback()"></div>

ディレクティブ

app.directive('exampleDirective ', function () {
    return {
        restrict: 'A',   // 'A' is the default, so you could remove this line
        scope: {
            callback : '&exampleFunction',
        },
        link: function (scope, element, attrs) {
            var num = scope.$eval(attrs.exampleNumber);
            console.log('number=',num);
            scope.callback();  // calls exampleCallback()
        }
    };
});

フィドル

もし、属性 example-number がハードコードされている場合、私は $eval を一度使って、その値を保存しておくことをお勧めします。 変数 num は正しい型(数値)を持つことになります。