应用程序/指令

var app = angular.module("MyApp",[]);

app.directive("adminRosterItem",function () {
    return {
        restrict: "E",scope: {
            displayText: "@"
        },template: "<td>{{ displayText }}</td>",// should I have this?
        link: function(scope,element,attrs){
            // What do I put here? I don't seem to have any
            // element to initialize (set up event handlers,for example)
        },compile: function(?,?,?){} // should I have this? If so,what goes inside?
    }
});

调节器

function PositionsController($scope) {
           $scope.positions = [{ Name: "Quarterback",Code: "QB" },{ Name: "Wide Receiver",Code: "WR" }
                              ]; 
}

HTML：

<div ng-app="MyApp">
    <div ng-controller="PositionsController">            
        <table>
            <tr ng-repeat="position in positions">
                <admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></admin-roster-item>
             </tr>
         </table>       
    </div>
</div>

这是一个非常简单的例子,但我无法让它呈现.也许有一些教程没有告诉我,还是那个秘密的角色知识？

如果我删除< trng-repeat =“...”/>内的指令并将< td> {{displayText}}< / td>相反,它将显示所有记录.

但是,我希望该指令比仅仅一个< td> {{}}< / td>更复杂. (最终),以便我可以在多个应用程序中重用此指令.

所以,我真的问我们如何正确地创建一个内容重复的指令？我失踪了什么应该从上面的代码中取消什么？