2013-07-04 13 views
13

fragte ich eine ähnliche Frage bereits bei dem Versuch, $ Umfang und $ http in einen Controller Cannot call method 'jsonp' of undefined in Angular.js controller zu injizieren. Jetzt versuche ich, diesen Code etwas zu überarbeiten, indem ich den Code in eine Funktion innerhalb des Controllers verschiebe. Ich stoße auf ähnliche Probleme und kann die Mechanismen der Abhängigkeitsinjektion in Angular nicht erfassen. Unten ist mein neuer Code. Sowohl $ scope als auch $ http sind nicht definiert. Was ich versuche, ist eine HTTP-Anfrage zu machen, wenn didSelectLanguage() ausgelöst wird und die resultierenden Daten der "image" -Variablen im $ -Scope vom übergeordneten Controller zugewiesen werden. Kann mir jemand aufklären, wie Dependency Injection in diesem Beispiel funktionieren soll?

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

Dies ist nicht die unmittelbare Antwort auf Ihre Frage, aber der Artikel ich schrieb [Was „Dinge“ können in andere in Angularjs injiziert werden?] (Http://stackoverflow.com/questions/16828287/what -things-kann-injected-in-others-in-eckig-js/16829270 # 16829270) (auch "Understanding Dependency Injection" im AngularJS-Wiki), speziell der Teil von '$ injector', erklärt, wie DI arbeitet eine niedrigere Ebene und kann Ihnen helfen zu verstehen, warum bestimmter Code funktioniert oder nicht funktioniert. –

+0

Das ist ein hervorragender Artikel! +1 auf beiden. – hughesdan

Antwort

19

Wenn Sie Ihren Controller zu erstellen:

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

Das Zeug im Inneren des Körpers der Controller-Funktion automatisch Zugriff auf $scope und $http wegen closures. Somit gibt es keine Notwendigkeit, etwas zusätzlich für eine Funktion auf der $scope angeben Zugriff auf diese Dinge:

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

}); 

Wenn didSelectLanguage ausgeführt wird, sieht es die Verweise auf $http und erreicht aus der Funktion in die äußere Funktion, um den Wert der Referenz zu erhalten; Das gleiche passiert für $scope innerhalb des Erfolgs-Callback.

Kurz gesagt, es gibt keine Notwendigkeit, Argumente an Ihre didSelectLanguage Funktion zu übergeben, noch gibt es in diesem Fall keinen Grund, die $injector zu verwenden.

1

Mit Hilfe von Brandon Tilley Kommentar & Artikel löste ich das Problem wie folgt. Ich werde jedoch die Frage offen halten, bis jemand anders antwortet oder bis ich genug verstehe, um eine begleitende Erklärung zu schreiben.

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

     } 

    }]) 
Verwandte Themen