如何在 AngularJS 中获得与服务的双向数据绑定？答案

【问题标题】：How to get two-way data binding with a Service in AngularJS?如何在 AngularJS 中获得与服务的双向数据绑定？
【发布时间】：2016-01-27 20:39:59
【问题描述】：

我对 JSON 文件进行查询，结果创建了一个表格，但由于此文件更新非常频繁，我需要经常查看此文件是否发生更改，以便在实时应用程序中显示它们。

我用 AngularJS 尝试了很多东西，但每次都失败了。

这是我的代码：

app.js

(function(){
   var myapp = angular.module("appMonitor",[]);


   myapp.factory('myService', function($http,$timeout) {
      var promise;
      var myService = {
         get: function() {
             if ( !promise ) {
                 // $http returns a promise,
                 // which has a then function, which also returns a promise
                 promise = $http.get('./json/verifyEmpty.json').then(function (response) {
                 // The then function here is an opportunity to modify the response
                 console.log(response.data);
                 // The return value gets picked up by the then in the controller.
                 return response.data;
                 });
              }
              // Return the promise to the controller
              return promise;
           }
        };
      return myService;
    });


    myapp.controller('monitorCtrl', function(myService,$scope) {
    // Call the async method and then do stuff with what is returned inside our own then function
        myService.get().then(function(d) {
            $scope.response = d;
        });
    });

})();

verifyEmpty.json

[
  { "name":"luis", "lastname":"perez", "age":27, "gender":"m", "haircolor":"yellow", "eyecolor":"brown", "student":false },
  { "name":"monse", "lastname":"chuang", "age":28, "gender":"f", "haircolor":"black", "eyecolor":"black", "student":true },
  { "name":"sarah", "lastname":"lee", "age":29, "gender":"f", "haircolor":"yellow", "eyecolor":"green", "student":true },
  { "name":"luisa", "lastname":"ortega", "age":28, "gender":"f", "haircolor":"black", "eyecolor":"blue", "student":false },
  { "name":"lorenza", "lastname":"garcia", "age":27, "gender":"f", "haircolor":"brown", "eyecolor":"brown", "student":true }
]

monitor.php

 <body ng-app="appMonitor">
    <div class="" ng-controller="monitorCtrl">
    <table>
       <tr>
          <th><strong>name</strong></th>
          <th><strong>lastname</strong></th>
          <th><strong>age</strong></th>
          <th><strong>gender</strong></th>
          <th><strong>haircolor</strong></th>
          <th><strong>eyecolor</strong></th>
          <th><strong>student?</strong></th>
       </tr>

       <tr ng-repeat="r in response" ng-cloak>
          <td>{{r.name}}</td>
          <td>{{r.lastname}}</td>
          <td>{{r.age}}</td>
          <td>{{r.gender}}</td>
          <td>{{r.haircolor}}</td>
          <td>{{r.eyecolor}}</td>
          <td ng-show="r.student">Yes</td>
        </tr>


    </table>
       <!-- {{response}} -->
    </div>
    <script type="text/javascript" src="./js/148libraries/angular.min.js"></script>
    <script type="text/javascript" src="./js/app.js"></script>
 </body>

【问题讨论】：

标签： javascript php angularjs json data-binding

【解决方案1】：

您无法完全按照自己的意愿行事，但您可以实现类似的目标。

使用您发布的代码，您只需一次次检索 JSON 内容。所以，我想在你的完整代码中，你不断地执行$http.get() 并在 X 秒后使用setTimeout() 或类似的东西汇集 JSON 文件。这是最简单的方法，但不是最有效的。

由于您的 JSON 文件托管在另一台机器上，因此您在客户端浏览器中运行的 Angular 代码无法知道文件何时更改。必须由其他人警告。

在这种情况下，您需要在服务器端实现的第一件事是在 JSON 文件更改时触发的例程。对于这个任务，您似乎正在使用 PHP，您可以查看 inotify 和这个 answer。

第二部分是在 Angular 中实现 Streaming 方法，而不是 Pooling 机制。由于我对 PHP 工具不是很了解，所以我现在找不到可以向您推荐的工具。如果你可以使用 Node，我建议你看看 Pusher 和tutorial。

使用这种方法，您可以将 Node 服务器设置为侦听 JSON 文件中的更改，并将 Angular 服务设置为侦听 Node.js。每当文件更改时，它都会触发 Node 和 Angular 来更新您的表格视图。

注意：它是一种单向数据绑定。双向数据绑定是 $watch 以查看用户在浏览器中所做的变量更改，当 $watch 收到事件时，您将调用 $http 来更新 JSON 文件。

【讨论】：