angular directive, http request and ng-repeat

Question

I'm trying to make a custom directive that gets data from a http request, and then through the template, loop the received data with ng-repeat.

I have made the http request working, but now I'm stuck. Not sure how to access the data in the template with ng-repeat.

My code:

<test-dir category="posts"></test-dir>
<test-dir category="comments"></test-dir>

Directive:

angular.module("myApp")
  .directive('testDir', ['$http', function($http) {
    return {
      restrict: 'AE',
      replace: true,
      template: '<div ng-repeat="item in data"><li>{{item.body}}</li></div',
      scope: {
        category: '@category'
      },
      controller: function($scope, $attrs) {
        $http({
          method: 'GET',
          url: 'http://jsonplaceholder.typicode.com/' + $attrs.category + '/1'

        }).then(function(result) {
          $scope.data = result.data;

        }, function(result) {
          alert("Error: No data returned");
        });
      }
    };
  }]);

Here is a jsfiddle with the same code: http://jsfiddle.net/g9zhdqw2/1/

I'm using https://jsonplaceholder.typicode.com/ as a placeholer.

You should read the answer to this question ,possibly in the following link http://stackoverflow.com/questions/16155542/dynamically-displaying-template-in-ng-repeat-directive-in-angularjs — Pritish Vaidya, Sep 02 '16 at 11:52

Developer · Accepted Answer · 2016-09-02T12:12:08.727

1

Assign the data to the scope: $scope.data = result
Define your template inline: 'template: <div data-ng-repeat="item in data">//your stuff goes here</div>'
Or define a template as html file and specify `templateUrl:' for the directive

edited Sep 02 '16 at 12:12

answered Sep 02 '16 at 11:54

Developer

6,240
3
18
24

@qua1ity - is it possible to show the code you tried? – Developer Sep 02 '16 at 12:06
yeah, edited my post. Basically just added $scope.data = result.data and your template – qua1ity Sep 02 '16 at 12:08
@qua1ity any error in console? are you getting data in `result.data` or is it just `result`? – Developer Sep 02 '16 at 12:09
@qua1ity - I think the data is coming in `result` itself...code updated – Developer Sep 02 '16 at 12:11
Ah yeah.. should be just result, it's working now. Thanks – qua1ity Sep 02 '16 at 12:14

score 1 · Answer 2 · answered Sep 02 '16 at 12:22

I have fixed your fiddle.

  var myApp = angular.module('myApp', []);


angular.module("myApp")
  .directive('testDir', ['$http', function($http) {
    return {
      restrict: 'AE',

      template: '{{data}}', //prints the data
      scope: {
        category: '@category'
      },
      controller: function($scope, $attrs) {
        $scope.data;
        $http({
          method: 'GET',
          url: 'http://jsonplaceholder.typicode.com/' + $attrs.category + '/1'
        }).then(function(result) {
            $scope.data = result;
          console.log(result.data);
        }, function(result) {
          alert("Error: No data returned");
        });
      }
    };
  }]);

To finish it just add ng-repeat instead is the {{data}}

angular directive, http request and ng-repeat

2 Answers2