AngularJS指令价值

时间:2013-12-20 19:28:43

标签: angularjs angularjs-directive

我有一个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 个答案:

答案 0 :(得分:16)

您可以使用链接函数的attributes参数:

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