Question

这是我的模板：

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

这是组件：

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

  }

});

这是模块：

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

问题是，视图是使用“测试”文本正确编译的，但是当GET请求完成时，它永远不会更新为“再次”。

A console.log确认已完成

console.log(self.status);

then()方法内部。

如果数据集已更改，为什么视图不会更新？

Answer 1

self未在then()函数内定义，您需要在控制器的开头定义它。

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

  }

});

Answer 2

我认为你应该避免使用这个或者自我，因为取决于你的位置（比如内部函数或循环）它意味着不同的东西。尝试使用指向控制器开始时this的变量

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

  }

});

Angular不更新$ http.get（）中的视图。然后（）

2 个答案: