如何在 AngularJS 中使用服务获取双向数据绑定

How to get two-way data binding with a Service in AngularJS?

本文关键字：获取 服务 数据绑定 AngularJS      更新时间：2023-09-26

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

我已经用AngularJS尝试了很多东西，但每次都会导致失败。

这是我的代码：

应用.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;
        });
    });
})();

验证空.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 }
]

监视器.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>

你不能完全按照自己的意愿去做，但你可以实现类似的事情。

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

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

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

第二部分是在 Angular 中实现流方法而不是池化机制。由于我不太了解PHP工具，我现在找不到一个可以推荐给你的工具。如果你可以使用 Node，我建议你看看 Pusher 和本教程。

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

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

相关文章：