javascript - with - angularjs directive object attribute




Como faço para passar vários atributos para uma diretiva de atributo Angular.js? (4)

A diretiva pode acessar qualquer atributo definido no mesmo elemento, mesmo se a diretiva em si não for o elemento.

Modelo:

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

Directiva:

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 o valor do atributo example-number for codificado, sugiro usar $eval uma vez e armazenar o valor. Variável num terá o tipo correto (um número).

Eu tenho uma diretiva de atributo restrita da seguinte forma:

 restrict: "A"

Eu preciso passar em dois atributos; um número e uma função / retorno de chamada, acessando-os dentro da diretiva usando o objeto attrs .

Se a diretiva fosse uma diretiva de elementos, restrita com "E" eu poderia a isto:

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

No entanto, por motivos que não entro, preciso que a diretiva seja uma diretiva de atributo.

Como faço para passar vários atributos em uma diretiva de atributo?


Isso funcionou para mim e acho que é mais compatível com HTML5. Você deve alterar o seu html para usar o prefixo 'data-'

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

E dentro da diretiva leia o valor da variável:

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

Você faz exatamente da mesma maneira que faria com uma diretiva de elemento. Você os terá no objeto attrs, minha amostra tem uma ligação bidirecional através do escopo isolado, mas isso não é obrigatório. Se você estiver usando um escopo isolado, poderá acessar os atributos com scope.$eval(attrs.sample) ou simplesmente scope.sample, mas eles podem não estar definidos na vinculação dependendo da sua situação.

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

usado como:

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

Você poderia passar um objeto como atributo e lê-lo na diretiva da seguinte forma:

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






directive