Angular Directive Does Not Evaluate Inside ng-repeat
angularjs, angularjs-directive, angularjs-ng-repeat, javascript
Solution
Agree that you need to think about where the directive begins and ends. Here's a plnkr that illustrates a directive bound to each item in the array - http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview
If you want the directive to encapsulate the enumerating of a collection defined by a parent scope it gets a bit tricker. I'm not sure if the following is 'best practice', but it's how i've handled it -- http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview
When relying on the directive to perform the iteration you get involved with transclusion, which is a made up word that means (as i understand it) take the content defined in the parent, push it into the directive and then evaluate it. I've been working with angular for a few months, and I'm starting to think that asking the directive to iterate is a smell, and I've always been able to design around it.
Problem
I have the following setup: App/Directive ``` 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> ``` It's a very simple example, but I can't get it to render. Perhaps there's something that tutorials aren't telling me, or that is secret Angular knowledge? If I remove the directive inside the `<tr ng-repeat="..." />` and place `<td>{{ displayText }}</td>` instead, it will show all records. But I want the directive to be more complicated than just a single `<td>{{}}</td>` (eventually) so that I could reuse this directive in multiple apps. So, I'm really asking how do we properly create a directive that goes inside ng-repeat? What am I missing? What should be taken off from the code above?