2013-07-04 7 views
13

Zadałem podobne pytanie wcześniej podczas próby wstrzyknięcia $ scope i $ http do kontrolera Cannot call method 'jsonp' of undefined in Angular.js controller. Teraz próbuję nieznacznie zmienić ten kod, przenosząc kod do funkcji w kontrolerze. Zdarza mi się podobne problemy i wydaje się, że nie potrafię uchwycić mechaniki zastrzyku zależności w Angular. Poniżej znajduje się mój nowy kod. Zarówno $ scope, jak i $ http są niezdefiniowane. Próbuję wykonać żądanie http, gdy didSelectLanguage() odpali i przypisze wynikowe dane do zmiennej "image" w $ scope od kontrolera nadrzędnego. Czy ktoś może oświecić mnie, jak powinien działać zastrzyk zależności w tym przykładzie?

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

     } 

    }]) 
+4

To nie jest bezpośrednia odpowiedź na twoje pytanie, ale artykuł, który napisałem w [Jakie "rzeczy" mogą zostać wstrzyknięte innym w Angular.js?] (Http://stackoverflow.com/questions/16828287/what -tings-can-be-injected into-in-angleular-js/16829270 # 16829270) (także "Zrozumienie iniekcji zależnej" na wiki AngularJS), w szczególności część na '$ injector', wyjaśnia, jak działa DI niższy poziom i może pomóc ci zrozumieć, dlaczego dany kod działa lub nie działa. –

+0

To wyjątkowy artykuł! +1 w obu. – hughesdan

Odpowiedz

19

Podczas tworzenia kontrolera:

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

Rzeczy wewnątrz ciała funkcji kontrolera automatycznie ma dostęp do $scope i $http powodu closures. Tak więc, nie ma potrzeby, aby określić coś dodatkowego dla funkcji na $scope mieć dostęp do tych rzeczy:

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

}); 

Kiedy didSelectLanguage jest uruchamiany, to widzi odniesienia do $http i osiąga out funkcji w funkcja zewnętrzna , aby uzyskać wartość odniesienia; to samo dzieje się dla $scope wewnątrz oddzwaniania powodzenia.

Krótko mówiąc, nie ma potrzeby przekazywania argumentów funkcji didSelectLanguage, ani nie ma w tym przypadku żadnego powodu, aby używać $injector.

1

Z pomocą Brandon Tilley za komentarz & artykule I rozwiązać problem w następujący sposób. Jednak pozostawiam to pytanie otwarte, dopóki ktoś inny nie odpowie lub dopóki nie zrozumiem na tyle, aby napisać towarzyszące wyjaśnienie.

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

     } 

    }]) 
Powiązane problemy