个人中心
gpt4 book ai didi

javascript - 如何在 AngularJS 中与服务进行双向数据绑定(bind)？

转载 作者：行者123 更新时间：2023-11-27 23:24:49 27 4
gpt4 key购买 nike

我对 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;
        });
    });

})();

验证空.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还有这个answer .

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

通过这种方法，您可以将 Node 服务器设置为监听 JSON 文件中的更改，并将 Angular 服务设置为监听 Node。每当文件更改时，都会触发 Node 和 Angular 更新您的 TableView 。

注意:它是一种单向数据绑定(bind)。双向数据绑定(bind)是 $watch 来获取用户在浏览器上所做的变量更改，当 $watch 收到事件时，您将进行 $http 调用来更新 JSON 文件。

关于javascript - 如何在 AngularJS 中与服务进行双向数据绑定(bind)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35047561/

27 4 0
文章推荐： javascript - 如何在 JavaScript 中使用 .replace ？
文章推荐： javascript - 如何将 json 值传递到 React 组件
文章推荐： html - 如何在 bootstrap 4 中将连续的内容居中？
文章推荐： javascript - 关注 jQuery Mobile pageshow 事件不渲染
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com