Как получить двустороннюю привязку данных к службе в AngularJS?

Я делаю запрос к файлу JSON и с результатом создаю таблицу, но поскольку этот файл обновляется очень часто, мне нужно постоянно видеть, был ли этот файл перенесен, чтобы показать его в приложении реального времени.Как получить двустороннюю привязку данных к службе в AngularJS?

Я пробовал много вещей с помощью 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>

источник

2016-01-27 Gustavo Contreras

Вы не можете делайте именно то, что хотите, но вы можете добиться чего-то подобного.

С кодом, который вы опубликовали, вы извлекаете содержимое JSON только один раз. Итак, я полагаю, что в вашем полном коде вы постоянно выполняете команду $http.get() и объединяете файлы JSON через X секунд, используя setTimeout() или что-то подобное. Это самый простой способ, но не самый эффективный.

Поскольку ваш JSON-файл размещен на другом компьютере, ваш угловой код, который работает в браузере клиента , не может знать, когда файл был изменен. Он должен быть предупрежден кем-то другим.

В этом случае первое, что вам нужно реализовать на стороне сервера, - это процедура, которая запускается при изменении файла JSON. Для этой задачи, как кажется, что вы используете PHP, вы можете взглянуть на inotify и на этот answer.

Вторая часть - реализовать подход Streaming в Angular вместо механизма объединения. Поскольку я не очень хорошо знаю PHP-инструменты, я не могу найти его прямо сейчас, чтобы предложить вам. Если бы вы могли использовать Node, я бы предложил вам взглянуть на Pusher и в этом tutorial.

С помощью этого подхода вы должны установить сервер узла, который будет прослушивать изменения в вашем файле JSON, а ваш Угловой сервис - слушать узел. Всякий раз, когда файл изменяется, он активирует Node и Angular для обновления вида таблицы.

Примечание: его односторонняя привязка данных. Двунаправленная привязка данных будет в $ watch для переменных изменений, сделанных вашими пользователями в браузере, и когда $ watch получает событие, вы должны сделать $ http-вызов для обновления файла JSON.

источник

2016-01-28 00:43:35 Zanon

Как получить двустороннюю привязку данных к службе в AngularJS?

ответ

Смежные вопросы