如何在AngularJS中使用Service獲得雙向數據綁定？

Question

我對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>

Answer 1

您不能完全按照自己的意願去做，但是可以實現類似的目的。

使用已發布的代碼，您只需一次即可檢索JSON內容。 因此，我想像一下，在您完整的代碼中，您會不斷執行$http.get()並在X秒后使用setTimeout（）或類似方法來合並JSON文件。 這是最簡單的方法，但不是最有效的。

由於您的JSON文件托管在另一台計算機上，因此在客戶端瀏覽器中運行的Angular代碼無法知道文件何時更改。 必須由其他人警告。

在這種情況下，您需要在服務器端實現的第一件事是在JSON文件更改時觸發的例程。 對於此任務，似乎您正在使用PHP，可以看一下inotify和這個答案。

第二部分是在Angular中實現Streaming方法，而不是Pooling機制。 由於我不太了解PHP工具，因此我現在找不到適合您的建議。 如果可以使用Node，建議您看一下Pusher和本教程。

使用這種方法，您可以將Node服務器設置為偵聽JSON文件中的更改，並將Angular服務設置為偵聽Node。 每當文件更改時，它將觸發節點和角度更新表視圖。

注意：它是單向數據綁定。 雙向數據綁定將是$ watch來查找用戶在瀏覽器上所做的變量更改，並且$ watch收到事件時，您將進行$ http調用以更新JSON文件。

如何在AngularJS中使用Service獲得雙向數據綁定？

問題描述

1 個解決方案

解決方案1
1 2016-01-28 00:43:35

如何在AngularJS中使用Service獲得雙向數據綁定？

問題描述

1 個解決方案

解決方案1 1 2016-01-28 00:43:35

解決方案1
1 2016-01-28 00:43:35