使用NG-INIT中的$ Timeout调用一次函数以显示每2秒钟的形状

Question

我正在尝试使用agnular 1使用$超时，以每2秒钟使用ng-init调用一个功能。

ng-init="$timeout(sc.displaySorted(), 2000)"

sc.displaysorted（）是一个在DOM上显示100种形状的函数。它可以在NG-Init上使用它，但是我无法弄清楚每2秒钟将其刷新一次。我还尝试了$ route.reload和递归。

这是vm.displaysorted函数：

  vm.displaySorted = function() {
//calls generateFunc and pass total of 50 shapes
var allShapes = generateFunc(50);
//calls sortingFunc with argument of all shapes
var sortedShapes = sortingFunc(allShapes);
for(i = 0; i < sortedShapes.length; i++) {
  var shape = sortedShapes[i]
  if(shape.type === "square") {
    vm.shapesToDisplay.push(sortedShapes[i]);
  }
  if(shape.type === "circle") {
    vm.shapesToDisplay.push(sortedShapes[i]);
  }
}

};//end vm.displaysorted

Answer 1

您正在寻找的是$ Interval Service。您可以这样使用：

$interval(displaySorted, 2000)

请注意

• 我只是放置了该功能，而不是呼叫（无圆形支架）。

• 您在查看ng-init="$interval(sc.displaySorted, 2000)"中不执行此操作，因为$interval在视图中不可用，而是在控制器中（由AngularJS注入的服务），因此您必须制作功能包装器。请参阅下面的完整样本。

angular
  .module('app', [])
  .controller('myctrl', function($interval) {
    var vm = this;
    vm.wizard = {
      displaySorted: fnDisplaySorted,
      init: fnInit
    }
    return vm.wizard;
    function fnInit() {
      $interval(fnDisplaySorted, 2000);
    }
    function fnDisplaySorted() {
      console.log('printing');
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myctrl as ctrl" ng-init="ctrl.init()">
</div>

Answer 2

为此使用$interval，您需要将其包含在控制器中，请参阅以下示例。

var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope, $interval) {
  this.displaySorted = function() {
    console.log("every 2 seconds");
  }
  this.runThis = function(){
    $interval(this.displaySorted, 2000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController as sc' ng-app="myApp" ng-init="sc.runThis()">
</div>