Having trouble displaying the elements of an array using ng-repeat with a directive. The binding is not working correctly and showing empty values.
To view the code, visit http://jsfiddle.net/qrdk9sp5/
Here is the HTML:
<div ng-app="app" ng-controller="testCtrl">
{{chat.words}}
<test ng-repeat="word in chat.words"></test>
</div>
And here is the JS:
var app = angular.module('app', []);
app.controller("testCtrl", function($scope) {
$scope.chat = {
words: [
'Anencephalous', 'Borborygm', 'Collywobbles'
]
};
});
app.directive('test', function() {
return {
restrict: 'EA',
scope: {
word: '='
},
template: "<li>{{word}}</li>",
replace: true,
link: function(scope, elm, attrs) {}
}
});
The current output is:
["Anencephalous","Borborygm","Collywobbles"]
•
•
•
The expected output should be:
["Anencephalous","Borborygm","Collywobbles"]
•Anencephalous
•Borborygm
•Collywobbles
Any assistance would be highly appreciated.