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

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?

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).

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>

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

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 : "=",
        ....
    },

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