Question

您好我有这个组件：

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

点击数据正确加载后，但不会出现在视图中。如何绑定数据以从异步中查看？谢谢。

Answer 1

您需要将回调函数绑定到此：

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

或者避免使用它，而是使用

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

AngularJS - 组件中的异步绑定

1 个答案: