Comment passer plusieurs attributs dans une directive d'attribut Angular.js ?

Question

J'ai une directive attributaire restreinte comme suit :

 restrict: "A"

J'ai besoin de transmettre deux attributs, un nombre et une fonction/callback, en y accédant dans la directive à l'aide de la balise attrs objet.

Si la directive était une directive d'élément, restreinte avec "E" Je pourrais le faire :

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

Cependant, pour des raisons que je n'exposerai pas, il faut que la directive soit une directive d'attribut.

Comment passer plusieurs attributs dans une directive d'attribut ?

Answer 1

La directive peut accéder à tout attribut défini sur le même élément, même si la directive elle-même n'est pas l'élément.

Modèle :

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

Directive :

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

<a href="http://jsfiddle.net/mrajcok/wTz4b/">fiddle</a>

Si la valeur de l'attribut example-number sera codée en dur, je suggère d'utiliser $eval une fois, et mémoriser la valeur. Variable num aura le type correct (un numéro).

Answer 2

Vous procédez exactement de la même manière qu'avec une directive d'élément. Vous les aurez dans l'objet attrs, mon exemple les a liés dans les deux sens via la portée isolée mais ce n'est pas obligatoire. Si vous utilisez une portée isolée, vous pouvez accéder aux attributs à l'aide de la commande scope.$eval(attrs.sample) ou simplement scope.sample, mais il se peut qu'ils ne soient pas définis lors de la mise en relation, selon votre situation.

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

utilisé comme :

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

Answer 3

Vous pouvez passer un objet comme attribut et le lire dans la directive comme ceci :

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

Answer 4

Ceci a fonctionné pour moi et je pense que c'est plus conforme à HTML5. Vous devriez changer votre html pour utiliser le préfixe 'data-'.

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

Et à l'intérieur de la directive, lire la valeur de la variable :

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

Answer 5

Si vous "exigez" la directive "exampleDirective" d'une autre directive, votre logique se trouve dans le contrôleur de la directive "exampleDirective" (disons "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();
});