我有以下设置:
应用/指令
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>
这是一个非常简单的示例,但是我无法渲染它。也许有些教程没有告诉我,或者这是Angular的秘密知识?
如果我改为在<tr ng-repeat="..." />and位置内删除该指令<td>{{ displayText }}</td>,它将显示所有记录。
<tr ng-repeat="..." />
<td>{{ displayText }}</td>
但是我希望该指令比仅一个指令<td>{{}}</td>(最终)要复杂,以便可以在多个应用程序中重用此指令。
<td>{{}}</td>
所以,我真的在问我们如何正确创建ng-repeat内的指令?我想念什么?上面的代码应该删除什么?
同意您需要考虑该指令的开始和结束位置。下面是说明了数组中绑定到每个项目一个指令一个plnkr - http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview
如果您希望该指令封装由父作用域定义的集合的枚举,则会有些麻烦。我不确定以下内容是否是“最佳做法”,但这是我的处理方式-http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview
当依赖指令执行迭代时,您会涉及到包含,这是一个虚构的词,意味着(据我所知)将父代中定义的内容带入指令中,然后对其进行评估。我已经使用了angular几个月了,而且我开始认为要求迭代指令是一种味道,而且我一直能够围绕它进行设计。