it-swarm.com.de

Wie übergebe ich mehrere Attribute an eine Angular.js-Attributdirektive?

Ich habe eine Attributdirektive, die wie folgt eingeschränkt ist:

 restrict: "A"

Ich muss zwei Attribute übergeben; eine Zahl und eine Funktion/einen Rückruf, der innerhalb der Direktive mit dem Objekt attrs darauf zugreift.

Wenn die Direktive eine Elementdirektive ist, die mit "E" eingeschränkt ist, könnte ich Folgendes tun:

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

Aus Gründen, auf die ich nicht eingehen möchte, muss die Direktive eine Attributdirektive sein.

Wie übergebe ich mehrere Attribute an eine Attributdirektive?

110
Undistraction

Die Direktive kann auf jedes Attribut zugreifen, das für dasselbe Element definiert ist, auch wenn die Direktive selbst nicht das Element ist.

Vorlage:

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

Richtlinie:

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

Wenn der Wert des Attributs example-number fest codiert wird, empfehle ich, $eval einmal zu verwenden und den Wert zu speichern. Die Variable num hat den richtigen Typ (eine Zahl).

200
Mark Rajcok

Sie tun genau so, wie Sie es mit einer Elementanweisung tun würden. Sie werden sie im attrs-Objekt haben. In meinem Beispiel haben sie eine bidirektionale Bindung über den Isolate-Bereich. Dies ist jedoch nicht erforderlich. Wenn Sie einen isolierten Bereich verwenden, können Sie mit scope.$eval(attrs.sample) oder einfach mit scope.sample auf die Attribute zugreifen. Abhängig von Ihrer Situation werden sie jedoch möglicherweise nicht beim Linken definiert.

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

benutzt als:

<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

Sie können ein Objekt als Attribut übergeben und wie folgt in die Direktive einlesen:

<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

Das hat für mich funktioniert und ich denke, ist HTML5-konformer. Sie sollten Ihre HTML-Datei ändern, um das Präfix "Daten" zu verwenden

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

Und innerhalb der Direktive lesen Sie den Wert der Variablen:

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

Wenn Sie 'exampleDirective' von einer anderen Direktive "benötigen" + Ihre Logik in 'exampleDirective' Controller (sagen wir '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