2015-10-22 12 views
5

バックエンドが変更されたときに私のアプリで自動リフレッシュする必要があります。バックエンドにGETをリロードするためのボタンを追加しましたが、そうしたくありません。これは私のコードは、あなたがちょうど定期的にデータを再ロードすることができanglejsバックエンド変更時の自動リロード

var myPr = angular.module('myPr',[]); 

myPr.controller("TodosController", function ($scope,$http){ 

    $scope.reload = function() { 
    $http.get('http://localhost:3000/api/todos'). 
     success(function (data) { 
      $scope.todos = data.todos; 
     }); 
    }; 
    $scope.reload(); 
}); 

おかげ

答えて

9

<body data-ng-app="myPr"> 
    <div ng-controller="TodosController"> 
    <div ng-repeat="todo in todos"> 
     <p>{{todo.title}} ...... {{todo.is_completed}}</p> 
    </div> 
    <button ng-click="reload()">Reload</button> 
    </div> 
</body> 

私app.jsです。そうでない場合は、socket.ioまたはPusherのような設定をして、サーバーが更新されたらブラウザに通知をプッシュする必要があります。

var myPr = angular.module('myPr',[]); 

myPr.controller("TodosController", function ($scope,$http,$timeout){ 

    $scope.reload = function() { 
    $http.get('http://localhost:3000/api/todos'). 
     success(function (data) { 
      $scope.todos = data.todos; 
     }); 

    $timeout(function(){ 
     $scope.reload(); 
    },30000) 
    }; 
    $scope.reload(); 
}); 
+2

あなたは@ケルビンの答えのように$ intervalを使用してください。タイムアウトは一度だけ実行されます。 – SolessChong

+0

私たちは$ intervalを使うことができますが、それをやめる方法は? –

7

あなたは文書化さhereとして$interval(fuctionToRepeat, intervalInMillisecond)を使用することができます。

var myPr = angular.module('myPr',[]); 

myPr.controller("TodosController", function ($scope,$http){ 

    $scope.reload = function() { 
     $http.get('http://localhost:3000/api/todos'). 
      success(function (data) { 
       $scope.todos = data.todos; 
      }); 
    }; 
    $scope.reload(); 
    $interval($scope.reload, 5000); 
}); 

注:作業が終了したこのサービスによって作成された間隔が明示的に破棄しなければなりません。特に、コントローラのスコープやディレクティブの要素が破壊されたときに自動的に破壊されることはありません。これを考慮に入れて、適切な瞬間に常にインターバルをキャンセルするようにしてください。

関連する問題