Question

我尝试使用简单的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让它工作，但我试图弄清楚它为什么现在不起作用。

Answer 1

您似乎正在使用jQuery作为ajax。如果在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

Answer 2

如果它适用于$ scope，这意味着没有它，Angular不会意识到你执行了异步操作。

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

因此，即使您从函数getInfo获取数据，也不会通过vm.data = data;

与视图同步

为什么Angular没有使用JSON文件进行更新？

2 个答案: