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

J'ai une directive d'attribut restreinte comme suit:

 restrict: "A"

J'ai besoin de passer deux attributs; un nombre et une fonction / rappel, y accédant dans la directive en utilisant l' attrsobjet.

Si la directive était une directive d'élément, limitée avec "E"je pourrais à ceci:

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

Cependant, pour des raisons que je ne vais pas aborder, j'ai besoin que la directive soit une directive attributaire.

Comment passer plusieurs attributs dans une directive d'attribut?

La directive peut accéder à n'importe quel 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>

Directif:

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

Si la valeur de l'attribut example-numberest codée en dur, je suggère de l'utiliser $evalune fois et de stocker la valeur. La variable numaura le type correct (un nombre).

Vous le faites exactement de la même manière que vous le feriez avec une directive d'élément. Vous les aurez dans l'objet attrs, mon exemple les a une liaison bidirectionnelle via la portée isolate mais ce n'est pas obligatoire. Si vous utilisez une portée isolée, vous pouvez accéder aux attributs avec scope.$eval(attrs.sample)ou simplement scope.sample, mais ils peuvent ne pas être définis lors de la liaison en fonction de 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>

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

Cela a fonctionné pour moi et je pense que c'est plus compatible HTML5. Vous devriez changer votre html pour utiliser le préfixe «data-»

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

Et dans la directive, lisez la valeur de la variable:

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

Si vous "avez besoin" de 'exampleDirective' d'une autre directive + votre logique est dans le contrôleur '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();
});