CODEWITHSUNDEEP
angularjs
hughesdan
hughesdan

Reputation: 2851

Injecting $http and $scope into function within controller

I asked a similar question earlier when attempting to inject $scope and $http into a controller Cannot call method 'jsonp' of undefined in Angular.js controller. Now I'm attempting to refactor that code slightly by moving the code into a function within the controller. I'm encountering similar issues and can't seem to grasp the mechanics of dependency injection in Angular. Below is my new code. Both $scope and $http are undefined. What I'm attempting to do is make an http request when didSelectLanguage() fires and assign the resulting data to the "image" variable in the $scope from the parent controller. Can someone enlighten me as to how dependency injection is supposed to work in this example?

angular.module('myApp.controllers', []).

  controller('ImagesCtrl', ['$scope', '$http', function ($scope, $http) {



        $scope.didSelectLanguage=function($scope, $http) {
            console.log($scope);
            $http.jsonp('http://localhost:3000/image?quantity=1&language='+this.language+'&Flag=&callback=JSON_CALLBACK')
            .success(function(data){
            $scope.image = data;
            });

        }

  }])

Upvotes: 15

Views: 52109

Answers (2)

Michelle Tilley
Michelle Tilley

Reputation: 159145

When you create your controller:

angular.module('myApp.controllers', []).
controller('ImagesCtrl', ['$scope', '$http', function ($scope, $http) {
  // ...
}]);

The stuff inside the body of the controller function automatically has access to $scope and $http because of closures. Thus, there's no need to specify anything additional for a function on the $scope to have access to these things:

angular.module('myApp.controllers', []).
controller('ImagesCtrl', ['$scope', '$http', function ($scope, $http) {

  $scope.didSelectLanguage = function() {
    $http.jsonp('http://localhost:3000/image?quantity=1&language=' + this.language + '&Flag=&callback=JSON_CALLBACK');
      .success(function(data) {
        $scope.$parent.image = data;
      });
  }

}]);

When didSelectLanguage is run, it sees the references to $http, and reaches out of the function into the outer function to get the value of the reference; the same happens for $scope inside the success callback.

So, in short, there's no need to pass any arguments to your didSelectLanguage function, nor is there in this case any reason to use the $injector.

Upvotes: 21

hughesdan
hughesdan

Reputation: 2851

With the help of Michelle Tilley's comment & article I solved the problem as follows. However, I'm going to keep the question open until someone else answers or until I understand enough to write an accompanying explanation.

controller('ImagesCtrl', ['$scope', '$http', '$injector', function ($scope, $http, $injector) {

    $scope.didSelectLanguage=function() {

            $http.jsonp('http://localhost:3000/image?quantity=1&language='+this.language+'&Flag=&callback=JSON_CALLBACK')
            .success(function(data){
            $scope.$parent.image = data;
            });

        }

  }])

Upvotes: 1

Related Questions