angularjs - 使用 ng-repeat 创建自定义转发器

Question

我想创建一个自定义转发器指令并将表达式传递给指令模板内的 ng-repeat。

这样做的原因是在 html 中提供一个更干净的界面，因为我还包括其他“幕后”指令。

http://jsfiddle.net/DeanIconWeb/Cg9RC/1/

这是我的 html 模板:

<tr custom-repeater="person in people">
    <td>{{person.name}}</td>
    <td>{{person.gender}}</td>
    <td>{{person.age}}</td>
</tr>

这是我的指令:

app.directive("customRepeater", function(){
    return {
        priority : 2000,
        restrict: 'A',
        replace : true,
        transclude : true,
        scope : {
            ngRepeatExp : "@customRepeater"
        },
        template : "<tr ng-repeat='{{ngRepeatExp}}' ng-class-even=\"'even'\" ng-transclude></tr>"
    }
});

在尝试进行这项工作时，我不断收到“模板必须有一个根元素”错误。

我最终做了以下事情，但这不是我真正想要的。

<tr ng-repeat="person in people" custom-repeater>
    <td>{{person.name}}</td>
    <td>{{person.gender}}</td>
    <td>{{person.age}}</td>
</tr>

指示

app.directive("customRepeater", function($compile){
        return {
            priority : 2000, //must be compiled before the ng-repeat (priority 1000)
            restrict: 'A',
            compile : function(tElem, tAttrs){
                tElem.attr("ng-class-even", "'even'" );
            }
        }
    });

Answer 1

您可以使用 $compile服务来做这样的事情(在您使用服务之前添加您认为合适的其他属性/指令):

http://jsfiddle.net/mQS4f/

app.directive("customRepeater", function ($compile) {
    return {
        //priority: 2000,
        //restrict: 'A', // This is implicit
        //replace: true,
        //transclude: true,
        //template: "<tr ng-repeat='{{ngRepeatExp}}' ng-class-even=\"'even'\" ng-transclude></tr>"
        link: function (scope, element, attrs) {
            attrs.$set('ng-repeat', attrs.customRepeater);
            element.removeAttr('custom-repeater');
            $compile(element)(scope);
        }
    }
});