AngularJS scope variables not working when using $http somewhere

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'}} 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.

Rashad Ibrahimov · Accepted Answer · 2015-11-06 11:21:37Z

1

The proper way to use $http is

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

Use .then() instead of .success()

answered Nov 6, 2015 at 11:21

Rashad Ibrahimov

3,3193 gold badges21 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rodmentou · Accepted Answer · 2015-11-06 11:23:45Z

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) {...}]);

If you think you are, you should take a look at this question of mine. haha.

Collectives™ on Stack Overflow

AngularJS scope variables not working when using $http somewhere

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related