当在某处使用$ http时，AngularJS范围变量不起作用

Question

I have a problem with my $scope variable whenever I try to use $http.get (no matter if I do it in the controller or in a service).

My controller looks like this:

app.controller('HomeController', ['$scope', function($scope, $http) {
    $scope.today = new Date();
}]);

Then I get a proper output of 6.11.2015 for the today variable for example. But as soon as I put in this or use a service:

app.controller('HomeController', ['$scope', function($scope, $http) {
    $scope.today = new Date();
    $http.get("data/selectAll.php")
    .success(function(data) {
        $scope.lokale = data;
    });
}]);

Then it doesn't work anymore and I get {{today | date : 'dd.MM.yyyy'}} {{today | date : 'dd.MM.yyyy'}} only. The $scope.lokale variable doesn't work either. I tried to use a json file (that I know of for sure that it works) to make sure that my php file isn't the problem, and it didn't work either, so that doesn't seem like the problem here.

Answer 1

The proper way to use $http is

$http.get('/someUrl', config).then(successCallback, errorCallback);

Use .then() instead of .success()

Answer 2

Your syntax have a little mistake. :)

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

You've forgoten to add $http as string before the controller function.

Take a look at this Angular Doc about Dependency Injection . Look for 'A Note on Minification'.

A Note on Minification Since Angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to minify the JavaScript code for PhoneListCtrl controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.

We can overcome this problem by annotating the function with the names of the dependencies, provided as strings, which will not get minified. There are two ways to provide these injection annotations:

Create a $inject property on the controller function which holds an array of strings. Each string in the array is the name of the service to inject for the corresponding parameter. In our example we would write:

 function PhoneListCtrl($scope, $http) {...}` PhoneListCtrl.$inject = ['$scope', '$http']; phonecatApp.controller('PhoneListCtrl', PhoneListCtrl); 

Use an inline annotation where, instead of just providing the function, you provide an array. This array contains a list of the service names, followed by the function itself.

function PhoneListCtrl($scope, $http) {...} phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]); Both of these methods work with any function that can be injected by Angular, so it's up to your project's style guide to decide which one you use.

When using the second method, it is common to provide the constructor function inline as an anonymous function when registering the controller:

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);