Як передати декілька атрибутів у директиву атрибутів Angular.js?


116

У мене обмежена директива щодо атрибутів:

 restrict: "A"

Мені потрібно передати два атрибути; число та функція / зворотний виклик, отримуючи доступ до них у директиві за допомогою attrsоб'єкта.

Якщо директива була елементарною директивою, "E"я обмежувався цим:

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

Однак, через те, що я не вдаватимусь, мені потрібно, щоб директива була атрибутивною директивою.

Як передати декілька атрибутів у директиву щодо атрибутів?


Це залежить від типу сфери дії вашої директиви (якщо така є). Вибір: відсутність нової області (за замовчуванням або явної з scope: false), нового сфери застосування (з нормальним успадкуванням прототипу, тобто scope: true), та ізоляції сфери (тобто, scope: { ... }). Який тип сфери створює ваша директива?
Марк Райкок

1
@MarkRajcok Має ізоляцію.
Нерозділення

Відповіді:


202

Директива може отримати доступ до будь-якого атрибуту, визначеного для того ж елемента, навіть якщо сама директива не є елементом.

Шаблон:

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

Директива:

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

Якщо значення атрибута example-numberбуде жорстко закодовано, я пропоную використовувати $evalодин раз і зберегти це значення. Змінна numматиме правильний тип (число).


Я відредагував приклад HTML для використання регістру змії. Я знаю, що не можу використовувати його як елемент. У цьому і полягає питання.
Нерозлучення

@Pedr, так, вибачте, що я занадто швидко прочитав про використання елементів. Я оновив відповідь, зазначивши, що для атрибутів також потрібно використовувати змій-футляр.
Марк Райкок

Нема проблем. Дякую за вашу відповідь. Я редагував імена атрибутів, щоб використовувати регістр змій. Ви гаразд, якщо я знімаю це з вашої відповіді, оскільки це була просто дурна помилка і відволікає увагу від фактичного питання та відповіді?
Нерозлучення

Я цього не розумію - як директива знає, як саме таку саму річ, що вказана у використанні директиви ("exampleCallback ()") у своїй області застосування? ("зворотний виклик: '& exampleCallback") Чи не повинен бути область "callback:" & exampleFunction "?
бластер

1
@FredrikL, для декількох директив по тому ж елемента, будь ласка , см stackoverflow.com/a/28735005/215945
Марк Rajcok

19

Ви робите це точно так само, як і з елементами директиви. Ви будете мати їх у об'єкті attrs, мій зразок має їх двостороннє зв’язування через область ізоляції, але це не потрібно. Якщо ви використовуєте ізольований діапазон, ви можете отримати доступ до атрибутів за допомогою scope.$eval(attrs.sample)простого простору.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>

9

Ви можете передати об'єкт як атрибут і прочитати його в директиві так:

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

Чи можливо надіслати булеве значення за допомогою об’єкта? Я спробував, {{true}}але він все одно повертає значення рядка true.
Пітер Бумсма

4

Це працювало для мене, і я думаю, що воно сумісніше з HTML5. Ви повинні змінити свій HTML, щоб використовувати префікс 'data-'

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

А в межах директиви прочитайте значення змінної:

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

0

Якщо ви "вимагаєте" '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();
});
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.