javascript - Angular 指令不在 ng-repeat 内部求值

Question

我有以下设置:

应用/指令

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?
    }
});

Controller

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>

这是一个非常简单的示例，但我无法渲染它。也许有些教程没有告诉我，或者这是 secret 的 Angular 知识？

如果我删除 <tr ng-repeat="..." /> 中的指令并放置 <td>{{ displayText }}</td>相反，它将显示所有记录。

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

所以，我真的想问我们如何正确地创建一个进入 ng-repeat 的指令？我错过了什么？应该从上面的代码中删除什么？

Answer 1

忽略所有的理论方面，您可以通过进行两个简单的更改来使您的代码正常工作。

1. 不要在属性名称中使用大小写混合。 displaytext 不 displayText
2. 把<td>指令外的标记，在模板中

这样做就可以了；它认为这些都是 Angular 错误。