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 stackoverflow.com/questions/16155542/… — Pritish Vaidya
– Pritish Vaidya, Commented Sep 2, 2016 at 11:52

Developer · Accepted Answer · 2016-09-02 12:12:08Z

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 2, 2016 at 12:12

answered Sep 2, 2016 at 11:54

Developer

6,4703 gold badges21 silver badges24 bronze badges

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

5 Comments

Developer Over a year ago

@qua1ity - is it possible to show the code you tried?

qua1ity Over a year ago

yeah, edited my post. Basically just added $scope.data = result.data and your template

Developer Over a year ago

@qua1ity any error in console? are you getting data in result.data or is it just result?

Developer Over a year ago

@qua1ity - I think the data is coming in result itself...code updated

qua1ity Over a year ago

Ah yeah.. should be just result, it's working now. Thanks

Itsik Mauyhas · Accepted Answer · 2016-09-02 12:22:36Z

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}}

Collectives™ on Stack Overflow

angular directive, http request and ng-repeat

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related