2016-11-27 10 views
0

私は単純な角度関数を作成しました。目的は、関数startActionをトリガするボタンを押した後、変数xの値の変化を表示することです。それは動作していないと私は理由が分からない。簡単な角度関数の説明が必要

var app = angular.module("myApp", []); 
app.controller('myController', ($scope, fabryka) => { 

$scope.startAction = function() { 
    setInterval(function() { 
     var x = 0; 
     $scope.x = (function() { 
      x++; 
      return x; 
     })(); 
    }, 500); 
    }  
}); 
+1

あなたはボタンのクリックで値を更新したいとあなたは 'interval'を持っていた理由は? –

+2

'var x = 0'を' setInterval'の上に移動する必要があるかもしれません – ntahoang

+0

これをどのように使用しているかも示してください – charlietfl

答えて

3

角度には、独自のsetIntervalラッパーがあります。$intervalです。

このコードは、ボタンを押す秒数です。スコープが破棄されたときの間隔のキャンセルに注意してください。

angular.module('app', []) 
 
    .controller('mainCtrl', function($scope, $interval) { 
 
    var vm = this; 
 

 
    vm.x = 0; 
 

 
    var interval; 
 

 
    vm.startAction = function() { 
 
     vm.isRunning = true; 
 
     interval = $interval(function() { 
 
     vm.x++; 
 
     }, 1000); 
 
    }; 
 

 
    vm.stopAction = function() { 
 
     vm.isRunning = false; 
 
     $interval.cancel(interval); 
 
    } 
 

 
    $scope.$on('$destroy', vm.stopAction); 
 

 
    return this; 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="mainCtrl as vm"> 
 
    <div>x: {{vm.x}}</div> 
 
    <button ng-click="!vm.isRunning? vm.startAction():vm.stopAction()">{{vm.isRunning? 'Pause':'Start'}}</button> 
 
</div>

関連する問題