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

发布时间：2020-12-17 17:12:43 所属栏目：安全来源：网络整理

导读：我想创建一个自定义转发器指令,并将表达式传递给指令模板内的ng-repeat. 这样做的原因是在html中提供了一个更清晰的界面,因为我还包括其他指令“引擎盖下”. http://jsfiddle.net/DeanIconWeb/Cg9RC/1/ 这是我的html模板： tr custom-repeater="person in pe

我想创建一个自定义转发器指令,并将表达式传递给指令模板内的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'" );
            }
        }
    });

解决方法

你可以使用$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);
        }
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!