How can i add a scope to a http controller in angular.js?

Question

I also want to have acces to a $scope in this controller so I can do methods like ng-click and ng-change in my html. I know have this $http but i cant do anny angular function on it and I can't seem to figure out how I can use a $scope in this controller.

app.controller('songController', ['$http', function($http) {

    $songs = this;
    $songs.tracks = [];

    $http({
            url: "http://api.q-music.be/1.2/tracks/plays?limit=20",
            dataType: "jsonp",
            jsonp: "callback"
        })
        .success(function(lastSongsList) {
            $songs.tracks = lastSongsList.played_tracks;
            console.log($songs.tracks);

        });


}]);

I want to be able to do methods in this controller like this :

$scope.change = function() {
        $scope.counter++;
      };

Komo · Accepted Answer · 2015-02-05 16:13:23Z

2

You need to inject your scope dependency like this :

app.controller('songController', ['$http', '$scope', function($http, $scope) {

answered Feb 5, 2015 at 16:13

Komo

2,1381 gold badge23 silver badges36 bronze badges

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

Comments

Connor · Accepted Answer · 2015-02-05 16:13:26Z

1

Change your controller definition to this:

app.controller('songController', ['$http', '$scope', function($http, $scope) {

The same way that you inject $http into your controller, you need to do the same with $scope to allow your controller to use it.

Look up dependency injection and you'll find all kinds of stuff about. It's pretty useful and you'll want to understand how it works if you're going to be working with Angular.

answered Feb 5, 2015 at 16:13

Connor

814 bronze badges

Comments

mindparse · Accepted Answer · 2015-02-05 16:14:45Z

0

$songs = this;
$songs.tracks = [];

should also be

$scope.songs = this;
$scope.songs.tracks = [];

same for the $http success handler

$songs.tracks = lastSongsList.played_tracks;

should be

$scope.songs.tracks = lastSongsList.played_tracks;

Your change function can remain in the controller

$scope.change = function() {
        $scope.counter++;
      };

Then in your html, e.g. button input use ng-click="change()"

answered Feb 5, 2015 at 16:14

mindparse

7,59529 gold badges105 silver badges217 bronze badges

Collectives™ on Stack Overflow

How can i add a scope to a http controller in angular.js?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related