Bagaimana cara mengirimkan beberapa atribut ke direktif atribut Angular.js?

116

Saya memiliki direktif atribut yang dibatasi sebagai berikut:

 restrict: "A"

Saya harus menyampaikan dua atribut; nomor dan fungsi / panggilan balik, mengaksesnya dalam direktif menggunakan attrsobjek.

Jika arahannya adalah arahan elemen, dibatasi dengan "E"saya bisa untuk ini:

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

Namun, untuk alasan saya tidak akan membahasnya, saya membutuhkan direktif menjadi direktif atribut.

Bagaimana cara mengirimkan beberapa atribut ke dalam sebuah direktif atribut?

Tidak ada gangguan
sumber
Itu tergantung pada jenis cakupan yang dibuat direktif Anda (jika ada). Pilihannya adalah: tidak ada cakupan baru (default, atau eksplisit dengan scope: false), cakupan baru (dengan pewarisan prototypal normal, yaitu, scope: true), dan cakupan isolasi (yaitu scope: { ... }). Jenis cakupan apa yang dibuat oleh direktif Anda?
Mark Rajcok
1
@MarkRajcok Ini memiliki ruang lingkup isolasi.
gangguan

Jawaban:

202

Direktif dapat mengakses atribut apa pun yang ditentukan pada elemen yang sama, meskipun direktif itu sendiri bukan elemennya.

Template:

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

Pengarahan:

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

Jika nilai atribut example-numberakan di-hardcode, saya sarankan untuk menggunakan $evalsekali, dan menyimpan nilainya. Variabel numakan memiliki jenis yang benar (angka).

Mark Rajcok
sumber
Saya telah mengedit contoh HTML untuk menggunakan snake-case. Saya tahu saya tidak bisa menggunakannya sebagai elemen. Itulah inti dari pertanyaannya.
gangguan
@Pedr, ya, maaf saya membaca terlalu cepat tentang penggunaan elemen. Saya memperbarui jawabannya, mencatat bahwa Anda juga perlu menggunakan kotak ular untuk atributnya juga.
Mark Rajcok
Tidak masalah. Terima kasih atas jawaban anda. Saya telah mengedit nama atribut untuk menggunakan kotak ular. Anda baik-baik saja jika saya menghapusnya dari jawaban Anda karena itu hanya kesalahan konyol saya dan mengalihkan perhatian dari pertanyaan dan jawaban yang sebenarnya?
gangguan
Saya tidak mengerti - bagaimana direktif tahu nama hal yang sama persis yang ditentukan dalam penggunaan direktif ("exampleCallback ()") dalam cakupannya? ("callback: '& exampleCallback') Bukankah seharusnya cakupannya" callback: "& exampleFunction"?
blaster
1
@FredrikL, untuk beberapa arahan pada elemen yang sama, silakan lihat stackoverflow.com/a/28735005/215945
Mark Rajcok
19

Anda melakukannya dengan cara yang persis sama seperti yang Anda lakukan dengan direktif elemen. Anda akan memilikinya di objek attrs, sampel saya memilikinya mengikat dua arah melalui cakupan isolate tetapi itu tidak diperlukan. Jika Anda menggunakan lingkup terisolasi Anda dapat mengakses atribut dengan scope.$eval(attrs.sample)atau hanya lingkup.sampel, tetapi mereka mungkin tidak didefinisikan pada penautan tergantung pada situasi Anda.

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

digunakan sebagai:

<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>
Jonathan Rowny
sumber
9

Anda bisa mengirimkan objek sebagai atribut dan membacanya menjadi direktif seperti ini:

<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);
        }
    };
});
Theo Itzaris
sumber
Apakah mungkin mengirim nilai boolean menggunakan objek? Saya mencoba {{true}}tetapi masih mengembalikan nilai string true.
Peter Boomsma
4

Ini berhasil untuk saya dan saya pikir lebih sesuai dengan HTML5. Anda harus mengubah html Anda untuk menggunakan awalan 'data-'

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

Dan di dalam direktif baca nilai variabel:

scope: {
        number : "=",
        ....
    },
jmontenegro
sumber
0

Jika Anda "memerlukan" 'exampleDirective' dari direktif lain + logika Anda ada di 'controller' exampleDirective (katakanlah '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();
});
Ilker Cat
sumber