Question

我有一个简单的指令

directive('animalCard',function(){
    return {
        restrict:'E',
        template: '<div>time for {{a}}</div>'
    }
});

我想迭代一个数组

$scope.animals = ['penguins','cows','turtles'];

使用HTML

<div ng-repeat="a in animals">
    <animal-card>{{a}}</animal-card>
</div>

在模板的大括号内我使用a作为迭代的表达式，在这种情况下，它足以让你在动物中说出一个。但是如果我想在迭代变量a没有意义的东西时使用这个相同的指令呢？除了使用像{{item}}这样的通用插值表达式之外，还有更好的解决方案吗？

Answer 1

好像你的问题更像'我应该怎样调用我的循环变量？`最后它真的没关系。只要您（或其他人查看您的代码）了解它正在做什么就没关系。

如果您希望它在语义上更具可读性，那么您需要将名称更改为通用名称：item，data，str，d（对于数据），i（因为我经常用于迭代/循环。

Answer 2

你的指令实际上是不正确的。首先，要从外部向指令插入内容，您需要transclude: true。其次，您必须将a中的变量ng-repeat="a in animals"绑定到指令范围，以便了解您的需求。
所以工作指令看起来应该是

directive('animalCard',function(){
return {
    restrict:'E',
    transclude: true,
    scope:{
         a: '@'
    },
    template: '<div><div>time for {{a}}</div><div ng-transclude></div></div>'
    }
});

最后一件事。

<div ng-repeat="a in animals">
    <animal-card a="{{a}}">this content will be placed at the end, because of ng-tranclude attr in directive</animal-card>
</div>

Demo

修改哦，我瞥了一眼代码，似乎被误解了。但命名惯例确实不合理，我通常使用item。但是如果你想将它重用于非常不同的对象模型，你可能应该使用不同的指令和额外的装饰。是的，此时不再具有可重用性。但是对于相同的对象模型，它是可重用的，并且您不应该遇到任何命名问题，因为它们是相同的类型。伊莫

Angular ng-repeat over指令

2 个答案: