Question

我尝试使用带有Angular 1的$ timeout来使用ng-init每2秒调用一次函数。

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

sc.displaySorted（）是一个在DOM上显示100个排序形状的函数。它在ng-init上有效，但我还没有能够弄清楚它每2秒刷新一次。我还试过了$ route.reload和recursion。

这是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]);
  }
}

}; //结束vm.displaySorted

Answer 1

您正在寻找的是$interval服务。您可以像这样使用它：

请注意

我只是把功能，而不是它的调用（没有圆括号）。
你没有查看$interval(displaySorted, 2000)因为ng-init="$interval(sc.displaySorted, 2000)"在视图中不可用但在控制器中（AngularJS注入的服务），所以你必须创建一个函数包装器功能。见下面的完整示例。

$interval

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');
    }

  });

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>

在ng-init中使用$ timeout来调用函数以每2秒显示一次形状

2 个答案: