Come faccio a passare più attributi in una direttiva di attributi Angular.js?

Ho una direttiva sugli attributi limitata come segue:

 restrict: "A"

Devo passare due attributi; un numero e una funzione / callback, accedendovi all'interno della direttiva utilizzando l' attrsoggetto.

Se la direttiva fosse una direttiva elemento, limitato con "E"potrei a questo:

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

Tuttavia, per ragioni che non approfondirò, ho bisogno che la direttiva sia una direttiva di attributo.

Come si passano più attributi in una direttiva di attributi?

La direttiva può accedere a qualsiasi attributo definito sullo stesso elemento, anche se la direttiva stessa non è l'elemento.

Modello:

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

Direttiva:

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

Se il valore dell'attributo example-numbersarà hardcoded, suggerisco di usarlo $evaluna volta e di memorizzare il valore. La variabile numavrà il tipo corretto (un numero).

Lo fai esattamente nello stesso modo in cui faresti con una direttiva elemento. Li avrai nell'oggetto attrs, il mio esempio li ha vincolati a due vie tramite l'ambito isolato ma non è necessario. Se stai usando un ambito isolato puoi accedere agli attributi con scope.$eval(attrs.sample)o semplicemente scope.sample, ma potrebbero non essere definiti al collegamento a seconda della tua situazione.

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

usato come:

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

Puoi passare un oggetto come attributo e leggerlo nella direttiva in questo modo:

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

Questo ha funzionato per me e penso sia più conforme a HTML5. Dovresti cambiare il tuo html per usare il prefisso "data-"

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

E all'interno della direttiva leggi il valore della variabile:

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

Se "richiedi" 'exampleDirective' da un'altra direttiva + la tua logica è nel controller 'exampleDirective' (diciamo '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();
});