In my current configuration, I have:
App/Directive
var app = angular.module("MyApp", []);
app.directive("adminRosterItem", function () {
return {
restrict: "E",
scope: {
displayText: "@"
},
template: "<td>{{ displayText }}</td>", // Is this necessary?
link: function(scope, element, attrs){
// What should be included here? It seems like there is no
// element to initialize (such as setting up event handlers)
},
compile: function(?,?,?){} // Do I need 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>
This is a basic example, but it does not seem to render properly. Could there be some information missing from tutorials or hidden Angular knowledge that I am not aware of?
If I remove the directive within the <tr ng-repeat="..." /> and replace it with
<td>{{ displayText }}</td>However, I intend for the directive to be more complex than just a single <td>{{}}</td> eventually, so I can reuse it in various apps.
Therefore, my main query is how to properly construct a directive to work within an ng-repeat loop. What key components are absent from the code above? What modifications should be made?