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

Question

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

 restrict: "A"

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

Если директива была директивой элемента, ограничена "E" Я мог бы к этому:

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

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

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

Answer 1

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

Шаблон:

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

играть на скрипке

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

Answer 2

Вы делаете это точно так же, как с директивой элемента. Вы будете иметь их в объекте attrs, в моем примере они имеют двустороннее связывание через область изолята, но это не обязательно. Если вы используете изолированную область, вы можете получить доступ к атрибутам с помощью scope.$eval(attrs.sample) или просто scope.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>

Answer 3

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

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

Answer 4

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

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

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

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

Answer 5

Если вам "требуется" "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();
});