web-dev-qa-db-ja.com

angularjsファクトリでsetIntervalを使用する

Angularjs docsで提供されているコードを試していました（ここで与えられた： http://jsfiddle.net/zGqB8/ ）それはただタイムファクトリを実装し、毎秒後にtimeオブジェクトを更新するために$ timeoutを使用します。

_angular.module('timeApp', [])
.factory('time', function($timeout) {
    var time = {};

    (function tick () {
        time.now = new Date().toString();
        $timeout(tick, 1000);  // how to do it using setInterval() ?
    })();

    return time;
});
_

$ timeout（）の代わりにsetInterval（）関数を使用してどうすればよいですか？ scope.$apply()を使用してangular実行コンテキストを入力する必要があることを知っていますが、ファクトリ関数ではどのように動作しますか？つまり、コントローラーでは、スコープがあります、しかしファクトリ関数にはスコープがありませんか？

javascriptangularjsjavascript-framework
21
user183123

$timeoutを間隔として使用できます。

var myIntervalFunction = function() {
    cancelRefresh = $timeout(function myFunction() {
        // do something
        cancelRefresh = $timeout(myIntervalFunction, 60000);
    },60000);
};

ビューが破棄された場合は、$destroyをリッスンしてビューを破棄できます。

$scope.$on('$destroy', function(e) {
        $timeout.cancel(cancelRefresh);
});
38
asgoth

更新

Angularはバージョン1.2で$ interval機能を実装しました- http://docs.angularjs.org/api/ng.$interval

以下の従来の例は、1.2より古いバージョンを使用している場合を除き、無視してください。

Angular-のsetInterval実装

TimeFunctionsというファクトリーを作成しました。このファクトリーは、$ setIntervalと$ clearIntervalを公開します。

工場でスコープを変更する必要があるときはいつでも、それを渡したことに注意してください。これが物事を行う「角度のある方法」を満たしているかどうかはわかりませんが、うまくいきます。

app.factory('timeFunctions', [

  "$timeout",

  function timeFunctions($timeout) {
    var _intervals = {}, _intervalUID = 1;

    return {

      $setInterval: function(operation, interval, $scope) {
        var _internalId = _intervalUID++;

        _intervals[ _internalId ] = $timeout(function intervalOperation(){
            operation( $scope || undefined );
            _intervals[ _internalId ] = $timeout(intervalOperation, interval);
        }, interval);

        return _internalId;
      },

      $clearInterval: function(id) {
        return $timeout.cancel( _intervals[ id ] );
      }
    }
  }
]);

使用例：

app.controller('myController', [

  '$scope', 'timeFunctions',

  function myController($scope, timeFunctions) {

    $scope.startFeature = function() {

      // scrollTimeout will store the unique ID for the $setInterval instance
      return $scope.scrollTimeout = timeFunctions.$setInterval(scroll, 5000, $scope);

      // Function called on interval with scope available
      function scroll($scope) {
        console.log('scroll', $scope);
        $scope.currentPage++;

      }
    },

    $scope.stopFeature = function() {
      return timeFunctions.$clearInterval( $scope.scrollTimeout );
    }

  }
]);
32
BradGreens

通常のJavaScriptメソッドを呼び出して、そのメソッド内でAngular=コードを$ applyでラップしますか？

例

timer = setInterval('Repeater()', 50);

var Repeater = function () {
  // Get Angular scope from a known DOM element
  var scope = angular.element(document.getElementById(elem)).scope();
  scope.$apply(function () {
    scope.SomeOtherFunction();
  });
};
4
Greg

最新リリース候補（1.2.0 rc3）には、 間隔 のサポートがあります。 changelog を参照してください

2
Cemo