Utiliser $ timeout dans ng-init pour appeler une fonction pour afficher des formes toutes les 2 secondes

Question

J'essaye d'utiliser $ timeout avec Angular 1 pour appeler une fonction toutes les 2 secondes avec ng-init. Sc.displaySorted() est une fonction qui affiche 100 formes triées sur le DOM. Cela marche de son propre chef sur ng-init, mais je n'ai pas réussi à le faire actualiser toutes les 2 secondes. J'ai aussi essayé $ route.reload et récursion.

Voici la fonction 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]); 
    } 
} 

} // fin vm.displaySorted

Answer 1

Qu'est-ce que vous êtes à la recherche est le service $interval. Vous pouvez l'utiliser comme ceci:

$interval(displaySorted, 2000) 

Avis ici que

• je viens de mettre la fonction, et non l'appel de celui-ci (sans parenthèses).

• Vous ne faites pas à vous voir ng-init="$interval(sc.displaySorted, 2000)" parce $interval n'est pas disponible dans la vue, mais dans le contrôleur (un service injecté par AngularJS), donc vous devez faire une enveloppe de fonction de la fonction. Voir l'exemple complet ci-dessous.

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

utilisation $interval pour cela, vous devez inclure dans le contrôleur, reportez-vous l'exemple ci-dessous.

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>