在 Angular 中绑定 JSON 数据答案

【问题标题】：Binding JSON data in Angular在 Angular 中绑定 JSON 数据
【发布时间】：2013-06-18 16:41:50
【问题描述】：

我正在评估用于项目的 JS 框架，但我被困在 Angular 和 Ember 之间。在完成对 Angular 的评估之前，我需要知道是否有一种简单的方法可以将数据绑定到存储在 S3 上的外部 json 文件。

我的用例是使用将定期实时发布到 S3 的数据创建一个记分牌……通常每 15 秒左右一次。

现在，我只是使用本地 json 文件中的数据创建一个基本的记分牌页面，但是有没有办法让 index.html 中的数据在 json 文件更改时更新某种回调？

感谢任何帮助。谢谢！

// app.js
var App = angular.module('App', []);

App.controller('ScoreboardCtrl', function($scope, $http) {
  $http.get('scoreboard.json')
    .then(function(res){
      // Storing the json data object as 'scores'
      $scope.scores = res.data;
    });
});

这个想法是通过循环分数来创建一个记分牌：

<!doctype html>
<html ng-app="App" >
<head>
  <meta charset="utf-8">
  <title>LIVE</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="ScoreboardCtrl">
  <ul>
    <li ng-repeat="score in scores">
      {{score.home_team_score}} - {{score.away_team_score}}
    </li>
  </ul>
</body>
</html>

【问题讨论】：

标签： javascript json angularjs ember.js jsonp

【解决方案1】：

有没有办法让 index.html 中的数据在 json 文件更改时更新

它应该已经这样做了。如果您更改$scope.scores，则视图将被更新。

如果您需要从实时服务器更新它，只需使用 setInterval（或 $timeout 服务）设置一个计时器，并定期调用 $http.get。

【讨论】：