Question

我有一个非常简单的Angular只读指令：

angular.module('customDirectives', [])

.directive('ngAvatar', function () {
    return {
        restrict: 'A',
        template: '<a href="#/people/?personId={{ entry.submitted_by }}">' +
                  '<img class="circular" ng-src="{{ entry.submitted_by | getAvatar }}" class="ng-cloak"/>' + 
                  '</a>',
    };
});

现在这适用于我最初想要的特定用例。但现在我想在我需要显示用户的头像和个人资料链接的任何情况下重复使用它。

当我开始重新分解我的代码时，我的html有这个代码片段，除了变量名称不同之外 - 例如{{评论 .submitted_by}}，{{entry。 created_by }}。这些都发生在ng-repeat块中，其中还显示其他信息。

所以，我的问题是，使这个指令可以重用并且能够使用不同命名的变量运行的最佳方法是什么？我应该将我的变量重命名为一致（例如总是使用entry吗？或者是否有某些方法可以扩展我的指令以考虑不同名称的变量，但格式相同。

Answer 1

看起来你想要的是能够将范围变量传递给你的指令。我就是这样做的。我没有测试过，但我已经多次做过类似的事了。

angular.module('customDirectives', [])

.directive('ngAvatar', function () {
    return {
        restrict: 'A',
        scope: { id: '=ngAvatar'},
        template: '<a href="#/people/?personId={{ id }}">' +
                      '<img class="circular" ng-src="{{ id | getAvatar }}" class="ng-cloak"/>' + 
                  '</a>'
    };
});

然后在你的html中你可以传入任何id就是这样。

<div ng-avatar='entry.submitted_by'></div>

AngularJS使用变量创建可重用的指令

1 个答案: