CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
drake24
drake24

Reputation: 525

How to use ng-repeat inside a directive template Angular JS

I have a problem displaying the JSON object data that my controller passes to the directive template. Here's 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; })

    }

Upvotes: 3

Views: 6825

Answers (1)

rmuller
rmuller

Reputation: 1837

Working Plunkr

You should include the directive in your HTML and rename your values a bit

html can be 

 <heroes data="heroes"></heroes>

then in your directive you would do

 scope:{
        heroes: '=data' 
    }

If you would do heroes: "=" and you are not restricting the directive to let's say an element, then you are basically including the directive twice (you don't want that). If you do want to use heroes as an attribute, like this

<heroes heroes="heroes"></heroes>

then add

restrict: "E"

to your directive.

Upvotes: 3

Related Questions