2013-07-04 9 views
13

Ho fatto una domanda simile in precedenza quando tentavo di iniettare $ scope e $ http in un controller Cannot call method 'jsonp' of undefined in Angular.js controller. Ora sto cercando di rifattare leggermente quel codice spostando il codice in una funzione all'interno del controller. Sto incontrando problemi simili e non riesco a capire i meccanismi di iniezione della dipendenza in Angular. Di seguito è il mio nuovo codice. Sia $ scope che $ http non sono definiti. Quello che sto tentando di fare è fare una richiesta http quando didSelectLanguage() attiva e assegna i dati risultanti alla variabile "image" in $ scope dal controller genitore. Qualcuno può illuminarmi su come si suppone che l'iniezione di dipendenza funzioni in questo esempio?

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

Questa non è la risposta immediata alla tua domanda, ma l'articolo che ho scritto a [Quali "cose" possono essere iniettate in altri in Angular.js?] (Http://stackoverflow.com/questions/16828287/what -things-can-be-inj-into-other-in-angular-js/16829270 # 16829270) (anche "Understanding Dependency Injection" sul wiki di AngularJS), in particolare la parte su '$ injector', spiega come funziona DI in un livello inferiore e può aiutarti a capire perché un determinato codice funziona o non funziona. –

+0

Questo è un articolo eccezionale! +1 su entrambi. – hughesdan

risposta

19

Quando si crea il controller:

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

Il materiale all'interno del corpo della funzione regolatore ha automaticamente accesso a $scope e $http causa di closures. Così, non c'è bisogno di specificare nulla aggiuntivo per una funzione sul $scope di avere accesso a queste cose:

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

}); 

Quando didSelectLanguage viene eseguito, vede i riferimenti a $http, e raggiunge fuori della funzione in la funzione esterna per ottenere il valore del riferimento; lo stesso accade per $scope all'interno della callback di successo.

Quindi, in breve, non è necessario passare alcun argomento alla funzione didSelectLanguage, né esiste in questo caso alcun motivo per utilizzare lo $injector.

1

Con l'aiuto del commento articolo & di Brandon Tilley ho risolto il problema nel modo seguente. Tuttavia, terrò aperta la domanda fino a quando qualcun altro non risponda o finché non capisco abbastanza da scrivere una spiegazione di accompagnamento.

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

     } 

    }]) 
Problemi correlati