Angular元素指令如何获取属性值答案

【问题标题】：Angular element directive how to get attribute valueAngular元素指令如何获取属性值
【发布时间】：2015-08-26 17:00:45
【问题描述】：

我正在使用 Angular 元素指令为给定项目生成一定数量的星数（评级）。

我创建了一个名为“generateStars”的指令，并在视图中使用它。

<generate-stars amount="3"></generate-stars>

我不希望指令依赖于当前范围，所以我想知道是否可以采用“数量”属性并在我的指令函数中获取值。

这是那个函数：

angular.module('myapp.directives', [])

.directive('generateStars', function() {
    var html = '<i class="fa fa-star"></i>';

    return {
        restrict: 'E',
        template: html,
        replace: true
    };
});

我找不到任何明显的文档可以让我在指令函数中获取“金额”的值。

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

您可以使用隔离范围并使用 amount 值可以作为属性传递，因为您正在这样做。

标记

<generate-stars amount="{{amount}}"></generate-stars>

控制器

$scope.amount = 3; //passing it through the scope.

指令

angular.module('myapp.directives', [])

.directive('generateStars', function() {
    var html = '<i ng-repeat="i in [1, 2, 3, 4, 5]" class="fa fa-star" ng-if="i>=amount"></i>';

    return {
        restrict: 'E',
        template: html,
        replace: true,
        scope: { 
           amount: '@' //`@` for one way binding.
        }
    };
});

这可以没有孤立的范围。基本上你需要在你的指令模板中创建类fa-3x。

angular.module('myapp.directives', [])

.directive('generateStars', function() {
        return '<i ng-repeat="i in [1, 2, 3, 4, 5]" class="fa fa-star" ng-if="i>='+ attrs.amount +' "></i>'
    };

    return {
        restrict: 'E',
        template: html,
        replace: true
    };
});

【讨论】：

fa-3x 用于字体大小，而不是图标数量。
感谢您的回复。此代码示例不允许我从 HTML 元素中获取值并在我的指令中使用它。我想完全避免使用“范围”。我只想从自定义指令元素中的 HTML 属性中获取值。
@Dan 您是否尝试过我在答案中添加的第二个示例……它仅与attribute 一起使用……不考虑范围

【解决方案2】：

您可以在指令定义对象的link 函数中使用attrs 对象。

angular.module('myapp.directives', [])
.directive('generateStars', function() {
    var html = '<i class="fa fa-star"></i>';

    return {
        restrict: 'E',
        template: html,
        replace: true,
        link: function(scope, element, attrs) {
           /*all attributes passed to directive are available as properties
              on attrs object*/
            console.log(attrs.amount);
        }
    };
});

HTML

<generate-stars amount="3"></generate-stars>

这样，当你的指令被渲染时，在控制台中打印值 3。

【讨论】：

我正在尝试在 return 语句之前使用指令中的“amount”变量。在这种情况下，我需要知道数量等于 3，然后生成 3 个 HTML 元素返回。
我认为您对 return 语句感到困惑。在使用 angular 注册自定义指令时，您基本上是在返回一个定义对象。它是link 函数在将您的自定义指令代码转换为浏览器中的html（由template 引用）之前调用

【解决方案3】：

感谢大家的帮助，但这些解决方案都没有为我解决。这就是我最终要做的。

angular.module('myApp.directives', [])

.directive('generateStars', function() {
    var html = '<i class="fa fa-star" ng-repeat="n in [] | range:roundedAmount"></i>';

    return {
        restrict: 'E',
        scope: {
            amount: '='
        },
        link: function(scope, element, attrs) {
            scope.roundedAmount = parseInt(scope.amount);
        },
        replace: true,
        template: html
    };
})

.filter('range', function() {
    return function(input, total) {
        total = parseInt(total);
        for (var i=0; i<total; i++)
            input.push(i);

        return input;
    };
});

【讨论】：