Как передать несколько атрибутов в Angular.директива атрибута js?

у меня есть директива атрибута, ограниченная следующим образом:

 restrict: "A"

мне нужно передать два атрибута; номер и функцию / обратный вызов, доступ к ним в директиве с помощью

106
angularjs attributes directive javascript parameters

5 ответов

директива может получить доступ к любому атрибуту, который определен на том же элементе, даже если сама директива не является элементом.

шаблон:

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

вы делаете это точно так же, как и с директивой элемента. Вы будете иметь их в объекте attrs, мой образец имеет их двустороннюю привязку через область изолирования, но это не требуется. Если вы используете изолированную область, вы можете получить доступ к атрибутам с scope.$eval(attrs.sample) или просто сфера.пример, но они не могут быть определены при связывании в зависимости от вашей ситуации.

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

как использовать:

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

вы можете передать объект как атрибут и прочитать его в директиве следующим образом:

<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

это сработало для меня, и я думаю, что это более совместимо с HTML5. Вы должны изменить свой html, чтобы использовать префикс " data -"

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

и в директиве прочитайте значение переменной:

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

Если вы "требуете ""exampleDirective" из другой директивы + ваша логика находится в контроллере "exampleDirective" (скажем, "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