How to properly display json in angular directive

Question

I have angular app that uses ui-router and I have set service and directive but can't display json data. It works fine without directive when I just display it in main template (home.html). My controller looks like this:

app.controller('homeCtrl', ['$scope', 'homeList', function ($scope, homeList) {
    homeList.get().then(function (homeList) {
        $scope.homeList = homeList;
        $scope.homeList.name = 'Home list';
    });
}]);

and when I do {{homeList.name}} it displays correctly but ng-repeat in directiveTemplate.html doesn't display data from json.

Here is plunker http://plnkr.co/edit/GTfLFQepFcXzXYcIHnP0

There are no errors in console so I can't figure out what I am doing wrong.

Thank you.

floribon · Accepted Answer · 2015-11-17 00:56:52Z

2

Your problem comes from this line in home.html:

<li home-list homeList="homeList"></li>

Here you are using a home-list attribute, which is your directive, but with no value. Then you are using an attribute homeList which is not bound to anything.

Remember that angular works in lower case in the HTML, so in short it should be:

<li home-list="homeList"></li>

See it working in that plunkr: http://plnkr.co/edit/xD4UmUj80wiLOXZqYFyK?p=preview

answered Nov 17, 2015 at 0:56

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to properly display json in angular directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related