Значение директивы AngularJS

У меня есть директива AngularJS. Моя директива ограничена для использования в качестве атрибута. Однако я хочу получить значение атрибута. В настоящее время у меня есть свой атрибут, определяемый как:

angular.module('myDirectives.color', [])
    .directive('setColor', function () {
        return {
            retrict: 'A',
            link: {
                pre: function () {
                    console.log('color is: ');
                }
            }
        };
    })
;

Я использую атрибут следующим образом:

<button type="button" set-color="blue">Blue</button>
<button type="button" set-color="yellow">Yellow</button>

Я знаю, что моя директива используется, потому что я вижу "цвет:". Однако я не могу понять, как заставить его отображать "синий" или "желтый" в конце этой инструкции консоли. Я хочу получить это значение, чтобы выполнить условную обработку. Как получить значение атрибута?

Спасибо!

Ответы

Ответ 1

Вы можете использовать аргумент атрибутов функции ссылки:

angular.module('myDirectives.color', [])
    .directive('setColor', function () {
        return {
            restrict: 'A',
            link: {
                pre: function (scope, element, attrs) {
                    console.log('color is: ' + attrs.setColor);
                }
            }
        };
    });

или вы можете создать область выделения следующим образом:

angular.module('myDirectives.color', [])
    .directive('setColor', function () {
        return {
            restrict: 'A',
            scope: {
              setColor: '@'
            },
            link: {
                pre: function (scope) {
                    console.log('color is: ' + scope.setColor);
                }
            }
        };
    });