AngularJS - async binding in component

Question

Hello I have this component:

zpc.component("myComponent", {
template: '<button ng-click="$ctrl.find()">CLICK</button>\
                {{$ctrl.results|json}}\ //allways empty
            </div>',
controller: function MyComponent($http) {
    this.text = "";
    this.results = [];
    this.find = function () {
        $http.get("https://swapi.co/api/films/1").then(function (response) {
            this.results = response.data;
            console.log(this.results); //here is data
        });
    }
}
});

After click data is loaded correctly, but will not appear in the view. How to bind data to view from async? Thank you.

JB Nizet · Accepted Answer · 2017-12-03 15:40:17Z

1

You need to bind the callback function to this:

$http.get("https://swapi.co/api/films/1").then(function (response) {
    this.results = response.data;
    console.log(this.results); //here is data
}.bind(this));

Or avoid using this, and use instead

var vm = this;
vm.find = function () {
    $http.get("https://swapi.co/api/films/1").then(function (response) {
        vm.results = response.data;
        console.log(vm.results); //here is data
    });
}

answered Dec 3, 2017 at 15:40

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Collectives™ on Stack Overflow

AngularJS - async binding in component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related