How to use ng-repeat inside Angular JS directive template
I have a problem displaying the JSON object data that my controller passes to the directive template. Here is my code.
Directive
app.directive('heroes', function(){
return{
scope:{
heroes: '='
},
template: '<li ng-repeat="x in hereos">{{ x.Name }} </li>', // DOESNT WORK
link:function(scope,element,attributes){
});
}
}
});
controller
app.controller('MainController',function($scope, $http){
$scope.getData = function(){
$http({
url: 'js/directives/herolist.php',
method: "GET"
}).success(function (data) { $scope.heroes = data.records; })
}
+3
source to share
1 answer
You have to include the directive in your HTML and rename your values a little
html can be
<heroes data="heroes"></heroes>
then in your directive you would do
scope:{
heroes: '=data'
}
If you make heroes: "=" and you don't restrict the directive to being able to say an element, then you basically include the directive twice (you don't want that). If you want to use heroes as an attribute, for example this
<heroes heroes="heroes"></heroes>
then add
limit: "E"
to your directive.
+3
source to share