Angular.js属性ディレクティブに複数の属性を渡すにはどうすればよいですか?


116

次のように制限されている属性ディレクティブがあります。

 restrict: "A"

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

ディレクティブが要素ディレクティブである場合、"E"私はこれに制限できます:

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

ただし、理由はわからないので、ディレクティブを属性ディレクティブにする必要があります。

複数の属性を属性ディレクティブに渡すにはどうすればよいですか?


これは、ディレクティブが作成するスコープのタイプ(存在する場合)によって異なります。選択肢は、新しいスコープなし(デフォルト、またはで明示的scope: false)、新しいスコープ(通常のプロトタイプ継承、つまりscope: true)、およびスコープの分離(つまりscope: { ... })です。ディレクティブはどのタイプのスコープを作成しますか?
Mark Rajcok 2013年

1
@MarkRajcokこれには分離スコープがあります。
気晴らし

回答:


202

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

テンプレート:

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

fiddle

属性の値example-numberがハードコーディングされる場合は、$eval一度使用して値を格納することをお勧めします。変数numは正しいタイプ(数値)になります。


サンプルのHTMLを編集して、snake-caseを使用しました。要素として使用できないことはわかっています。それが問題のポイントです。

@Pedr、ええ、申し訳ありませんが、要素の使用について速すぎます。答えも更新しましたが、属性にも蛇ケースも使用する必要があることに注意してください。
Mark Rajcok、2013年

問題ない。ご回答有難うございます。属性名を編集して、snake-caseを使用しました。それは私によるばかげたエラーであり、実際の質問と回答の要点をそらすので、私がそれをあなたの回答から削除しても大丈夫ですか?
気晴らし

これがわかりません-ディレクティブは、ディレクティブの使用法( "exampleCallback()")で指定されたものとまったく同じものをスコープ内でどのように指定するのですか?( "callback: '&exampleCallback')スコープを" callback: "&exampleFunction"にすべきではありませんか?
ブラスター2013

1
@FredrikL、同じ要素の複数のディレクティブについては、stackoverflow.com
a / 28735005/215945

19

要素ディレクティブの場合とまったく同じ方法で行います。これらはattrsオブジェクトにあります。私のサンプルでは、​​isolateスコープを介した双方向バインディングがありますが、必須ではありません。分離されたスコープを使用している場合は、scope.$eval(attrs.sample)または単にscope.sampleで属性にアクセスできますが、状況によってはリンク時に属性が定義されない場合があります。

app.directive('sample', function () {
    return {
        restrict: 'A',
        scope: {
            'sample' : '=',
            'another' : '='
        },
        link: function (scope, element, attrs) {
            console.log(attrs);
            scope.$watch('sample', function (newVal) {
                console.log('sample', newVal);
            });
            scope.$watch('another', function (newVal) {
                console.log('another', newVal);
            });
        }
    };
});

使用されます:

<input type="text" ng-model="name" placeholder="Enter a name here">
<input type="text" ng-model="something" placeholder="Enter something here">
<div sample="name" another="something"></div>

9

オブジェクトを属性として渡し、次のようなディレクティブに読み込むことができます。

<div my-directive="{id:123,name:'teo',salary:1000,color:red}"></div>

app.directive('myDirective', function () {
    return {            
        link: function (scope, element, attrs) {
           //convert the attributes to object and get its properties
           var attributes = scope.$eval(attrs.myDirective);       
           console.log('id:'+attributes.id);
           console.log('id:'+attributes.name);
        }
    };
});

オブジェクトを使用してブール値を送信することは可能ですか?私は試しました{{true}}が、それでも文字列値を返しますtrue
Peter Boomsma

4

これは私にとってはうまくいき、HTML5に準拠していると思います。'data-'接頭辞を使用するようにHTMLを変更する必要があります

<div data-example-directive data-number="99"></div>

そして、ディレクティブ内で変数の値を読み取ります。

scope: {
        number : "=",
        ....
    },

0

別のディレクティブから「exampleDirective」を「要求」する場合、ロジックは「exampleDirective」のコントローラーにあります(「exampleCtrl」としましょう)。

app.directive('exampleDirective', function () {
    return {
        restrict: 'A',
        scope: false,
        bindToController: {
            myCallback: '&exampleFunction'
        },
        controller: 'exampleCtrl',
        controllerAs: 'vm'
    };
});
app.controller('exampleCtrl', function () {
    var vm = this;
    vm.myCallback();
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.