4

カスタム リピーター ディレクティブを作成し、式をディレクティブ テンプレート内の 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>"
    }
});

これを機能させようとして、「テンプレートにはルート要素が 1 つ必要です」というエラーが表示され続けました。

私は最終的に次のことを行いましたが、それは私が本当に望んでいるものではありません。

<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'" );
            }
        }
    });
4

1 に答える 1