Angular not updating view in $http.get().then()

Question

This is my template:

<p>{{$ctrl.status}}</p>

This is the component:

var phoneListModule = angular.module("phoneListModule");

phoneListModule.component("phoneList", {

    templateUrl: "phone-list/phone-list.template.html",

  controller: function PLController($http) {

    this.status = "testing";

    $http.get("http://localhost/data.json").then(function(response) {
        self.status = "again";
    });

  }

});

And this is the module:

var phoneListModule = angular.module("phoneListModule", []);

The problem is that, the view is compiled properly with the "testing" text, but it's never updated to "again" when the GET request completes.

A console.log confirms that it completed fine

console.log(self.status);

Inside of the then() method.

Why is the view not updating if the dataset has changed?

i think you should avoid using this or self because depending where you are ( like inside function or loop ) it means something different. Try with var vm = this ; vm.status = 'testing' and use vm after — AlainIb
– AlainIb, Commented Jan 22, 2017 at 10:39
Yeah, in the docs it's also suggested to put in var self = this;, and I overlooked that, it works now. — Ognjen Galić
– Ognjen Galić, Commented Jan 22, 2017 at 10:40

Ognjen Galić · Accepted Answer · 2017-01-22 10:41:44Z

2

self is not defined inside of the then() function, you need to define it at the start of the controller.

var phoneListModule = angular.module("phoneListModule");

phoneListModule.component("phoneList", {

    templateUrl: "phone-list/phone-list.template.html",

  controller: function PLController($http) {

    var self = this; <<<< THIS IS IMPORTANT

    this.status = "testing";

    $http.get("http://localhost/data.json").then(function(response) {
        self.status = "again";
    });

  }

});

answered Jan 22, 2017 at 10:41

Ognjen Galić

2,7623 gold badges27 silver badges35 bronze badges

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

1 Comment

Alon Eitan Over a year ago

Was it my suggestion that I deleted? Nice :) Thought I was wrong

AlainIb · Accepted Answer · 2017-01-22 10:41:02Z

0

i think you should avoid using this or self because depending where you are ( like inside function or loop ) it means something different. Try with a variable pointing on this in the beggining of controller

phoneListModule.component("phoneList", {

    templateUrl: "phone-list/phone-list.template.html",

  controller: function PLController($http) {

    var vm = this ;
    vm.status = "testing";

    $http.get("http://localhost/data.json").then(function(response) {
        vm.status = "again";
    });

  }

});

answered Jan 22, 2017 at 10:41

AlainIb

4,6156 gold badges42 silver badges67 bronze badges

Collectives™ on Stack Overflow

Angular not updating view in $http.get().then()

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related