javascript - 需要简单的 Angular 函数解释

Question

我创建了一个简单的 Angular 函数。目的是在按下触发函数 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);
    }      
});

Answer 1

Angular 有自己的 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>