为什么 Angular 不使用 JSON 文件进行更新？答案

【问题标题】：Why is Angular not updating with a JSON file?为什么 Angular 不使用 JSON 文件进行更新？
【发布时间】：2017-07-25 20:55:40
【问题描述】：

我正在尝试使用一个简单的 Angular JS 应用程序将数据从 JSON 文件加载到网站，但它不起作用。

JSON 文件是：

{"a": "a"}

Angular 应用是：

var app = angular.module("app", [])
  .controller("ctrl", ["ser", function(ser) {
    var vm = this;

    ser.getInfo().then(function(data) {
      vm.data = data;
    });
  }])
  .service("ser", function() {
    this.getInfo = function() {
      return $.get("models/model.json");
    };
  });

HTML 是：

<div ng-controller="ctrl as ctrl">
  <p>{{ctrl.data.a}}</p>
</div>

我没有收到任何控制台错误。我认为问题与控制器的词法范围有关，因为控制器中的异步getInfo().then() 调用，我检查了函数内部的vm，它被正确加载但似乎没有改变ctrl对象或 Angular 在更新时不会更新。

我在本地提供应用程序。

它有时有效，但大多数时候无效。我可以使用$scope 让它工作，但我想弄清楚为什么它现在不能工作。

【问题讨论】：

“我在本地提供应用程序”。你的意思是从文件系统？因为那行不通，因为您不能在文件系统上使用 HTTP 请求。见this question's answers for more
@MikeMcCaughan 我正在使用 simplehttpserver

标签： angularjs json object

【解决方案1】：

看来您正在为 ajax 使用 jQuery。如果您在 Angular 上下文之外修改范围，则需要通知 Angular 运行摘要

改为使用 Angular $http 以避免此类问题

var app = angular.module("app", [])
  .controller("ctrl", ["ser", function(ser) {
    var vm = this;

    ser.getInfo().then(function(response) {
      vm.data = response.data;
    });
  }])
  .service("ser", ['$http', function($http) {
    this.getInfo = function() {
      return $http.get("models/model.json");
    };
  }]);

DEMO

【讨论】：

【解决方案2】：

如果它与 $scope 一起工作，这意味着没有它，Angular 不会意识到您执行了异步操作。

我认为以下行使用的是 jQuery：return $.get("models/model.json");

因此，即使您从函数 getInfo 获取数据，它也不会通过 vm.data = data; 与视图同步

【讨论】：