Angular Directive不评估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?
    }
});

调节器

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>

这是一个非常简单的例子,但我不能让它渲染.也许教程没有告诉我,或者是秘密的角度知识？

如果我删除里面的指令<tr ng-repeat="..." />,并将<td>{{ displayText }}</td>相反,它会显示所有记录.

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

那么,我真的在问我们如何正确地创建一个在ng-repeat内的指令？我错过了什么？应该从上面的代码中删除什么？

Answer 1

忽略所有理论方面,您可以通过两个简单的更改来使代码工作.

1. 不要在属性名称中使用大小写混合. displaytext 不 displayText
2. 将<td>标签放在模板中的指令之外

这样做,它会起作用; 它认为这些都是角色错误.

Answer 2

同意您需要考虑指令的开始和结束位置.这是一个plnkr,它说明了绑定到数组中每个项目的指令 - http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

如果您希望该指令封装由父作用域定义的集合的枚举,则会获得一点点转向.我不确定以下是"最佳实践",但这是我如何处理它 - http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

当依赖指令执行迭代时,你会涉及到包含翻译,这是一个组成单词,意思是(据我理解)采用父类中定义的内容,将其推入指令然后进行评估.我已经使用角度工作了几个月,我开始认为要求指令迭代是一种气味,我一直能够围绕它进行设计.