CODEWITHSUNDEEP
javascriptangularjs
DevStarlight
DevStarlight

Reputation: 804

$http using a rest Controller in Angular 1.4.8

I'm recently new in AngularJS and I'm trying to use an alias on my controller to call the data that is comming from a $http response factory.

What I've done right now is what it follows:

DiscoverService.js

var discoverService = angular.module('discover.services', []);

discoverService.factory('discoverV', function ($http) {
  return {
    list: function(callback){
      $http.get('https://myurl.com/get/jsondata').success(callback);
    }
  };
});

DiscoverCtrl.js

var discoverModule = angular.module('discover', ['discover.services']);

discoverModule.controller('discoverCtrl', [ '$scope', 'discoverV', function($scope, discoverV) {
  $scope.elm = [];

  discoverV.list(function(data) {
    $scope.elm = data;
  });
}]);

_discover.html

<div class="wrapper" ng-controller="discoverCtrl as discover">
  <article>
    <section id="block-stories" class="container" ng-repeat="element in elm">
      {{element.story_id}}
    </section>
  </article>
</div>

I've been trying to do it and I don't understand why the next code doesn't work:

discoverModule.controller('discoverCtrl', [ 'discoverV', function(discoverV) {
  var elm = this;
  elm.videos = [];

  discoverV.list(function(data) {
    elm.videos = data;
  });

}]);

<div class="wrapper" ng-controller="discoverCtrl as discover">
  <article>
    <section id="block-stories" class="container" ng-repeat="element in discover.videos">
      {{element.story_id}}
    </section>
  </article>
</div>

What I'm doing wrong?

Thanks in advice.

Upvotes: 0

Views: 63

Answers (1)

MaKCbIMKo
MaKCbIMKo

Reputation: 2820

Once you wrote discoverCtrl as discover you should use discover to access to the controller scope.

So, you should wrote something like:

<div class="wrapper" ng-controller="discoverCtrl as discover">
  <article>
    <section id="block-stories" class="container" ng-repeat="element in discover.videos">
      {{element.story_id}}
    </section>
  </article>
</div>

I created an example (link) where I just mocked $http call and it works (only if you got another error).

Hope it will help.

Upvotes: 3

Related Questions