web-dev-qa-db-fra.com

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 transmettre deux attributs. un numéro et une fonction/rappel, y accédant dans la directive à l'aide de l'objet attrs.

Si la directive était une directive élément, restreinte à "E", je pourrais:

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

Cependant, pour des raisons que je n'entrerai pas dans les détails, la directive doit être une directive d'attribut.

Comment puis-je passer plusieurs attributs dans une directive d'attribut?

javascriptparametersangularjsattributesdirective
110
Undistraction

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>

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-number sera codée en dur, je suggère d'utiliser $eval une fois et de stocker la valeur. La variable numaura le type correct (un nombre).

200
Mark Rajcok

Vous le faites exactement de la même manière qu'avec une directive element. Vous les aurez dans l'objet attrs, mon exemple les lie de manière bidirectionnelle via la portée isolate mais ce n'est pas obligatoire. Si vous utilisez une étendue 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 à 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>
19
Jonathan Rowny

Vous pouvez passer un objet en tant qu'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);
        }
    };
});
8
Theo Itzaris

Cela a fonctionné pour moi et je pense que c'est plus compatible HTML5. Vous devriez changer votre code 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 : "=",
        ....
    },
4
jmontenegro

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