21

URLからいくつかのリンクを取得してそれらをペイントするangularJSアプリのこの実用的な実装があります。ただし、URL のリンクは常に更新されています。この $scope.listlinks を定期的に、たとえば 10 秒ごとに更新したいと思います。

運が悪かったので setInterval で遊んでみました。

Javascript

var App = angular.module('App', []);
App.controller('ListLinksCtrl', 
function get($scope, $http ) {
  $http.get('http://example_url.com/my_changing_links_json').then(
       function(res){$scope.listlinks = res.data;});
}
);

HTML

<div id="cnt1" ng-controller="ListLinksCtrl">
   <div ng-repeat="singlelink in listlinks">
        <a href="{{ singlelink.url }}"> 
           {{ singlelink.destination }} 
        </a>
   </div>
</div>
4

8 に答える 8

28

jvandemoの答えは機能しますが、少し改善できると思います。を使用するsetIntervalことで、Angular が従う依存性注入の規則を破り、コントローラーの単体テストを困難にします。

Angular は現在setInterval、組み込みサービスを介してサポートしていませんが、$timeoutサービスを使用して同じ機能を作成できます。コントローラーを次のように変更します。

app.controller('MainCtrl', function($scope, $http, $timeout) {

  // Function to get the data
  $scope.getData = function(){
    $http.get('style.css')
      .success(function(data, status, headers, config) {

      // Your code here
      console.log('Fetched data!');
    });
  };

  // Function to replicate setInterval using $timeout service.
  $scope.intervalFunction = function(){
    $timeout(function() {
      $scope.getData();
      $scope.intervalFunction();
    }, 1000)
  };

  // Kick off the interval
  $scope.intervalFunction();

});
于 2013-08-24T10:49:59.623 に答える
2

この回答は draw.walker の回答に基づいていますが、コントローラーを変更しても無限に実行される複数の更新が生成されないようにしています。またgetData、1 秒遅らせるのではなく、すぐに実行されます。

Angular ルートを使用し、それらに Ctrl を設定するかどうかによって異なります。そうでない場合は、このコントローラーがスコープ内にあるかどうかを判断する別の方法が必要になります。

app.controller('MainCtrl', function($scope, $rootScope, $route, $timeout) {

    // Function to get the data
    $scope.getData = function() {
        ...
    };

    // Get the data immediately, interval function will run 1 second later
    $scope.getData();

    // Function to replicate setInterval using $timeout service.
    $scope.intervalFunction = function() {
        var currentCtrl = $route.current.$$route.controller;
        var currentlyRunning = $rootScope.myAppMainCtrlRefreshRunning;
        //do not run if the MainCtrl is not in scope
        //do not run if we've already got another timeout underway (in case someone jumps back and forth between
        //controllers without waiting 1 second between)
        if (currentCtrl === "MainCtrl" && !currentlyRunning) {
            $timeout(function() {
                $rootScope.myAppMainCtrlRefreshRunning = true;
                $scope.getData();
                $scope.intervalFunction();
                $rootScope.myAppMainCtrlRefreshRunning = false;
            }, 1000);
        };
    };
    // Kick off the interval
    $scope.intervalFunction();

});
于 2014-06-23T21:50:45.960 に答える