Question

以下是目前的代码：http://plnkr.co/edit/DK9SSrIJZieSxDb5EN41?p=preview

目标：按开始按钮，秒计数器开始。似乎没有工作，CountdownCtrl函数应该只在按钮点击时启动..所以我有两个单独的功能，或者我如何去做这个。

Answer 1

我的插件叉子显示了如何做到这一点。 Check it out。我简化了您的原始代码，以展示如何使这更容易理解和维护。

首先，您需要正确初始化模块。

 var myApp = angular.module('myApp', []); // the second param is your module's dependencies. since you have none, it MUST be an empty array

接下来，声明您的控制器，并接受两个依赖项，$scope和$timeout：

 myApp.controller('CountDownCtrl', ['$scope', '$timeout', function($scope, $timeout) { // angular will inject the controller's $scope and the $timeout service
       // todo
 }]);

然后，在$scope上声明一个项目以存储计数器值。可以在视图中访问此值。然后定义一个函数来执行实际的倒计时。它只是增加$scope.value，然后为它自己设置一个新的超时，实际上每秒调用一次，直到它被取消。

最后，添加功能以开始和停止倒计时：

  $scope.value = 0;

  // because of JS closures, $scope from the outer context will be included in countdown()'s context. 
  function countdown() {
    $scope.value++;
    $scope.timeout = $timeout(countdown, 1000);
  }

  $scope.start = function() {
    countdown();
  };

  $scope.stop = function() {
    $timeout.cancel($scope.timeout);
  };

最后，确保您的视图指示它使用哪个控制器并添加适当的控制器功能。

  <body ng-controller="CountDownCtrl">

    {{value}}

    <button ng-click="start()">Start</button>
    <button ng-click="stop()">Stop</button>    
  </body>

Answer 2

你肯定是在正确的轨道上。只有一些东西没有连线。

这是updated plunker。

这些是使一切正常运转所需的主要内容：

将'myApp'定义为模块的名称并连线。这允许控制器正确地注册到模块。
使CountDownCtrl函数成为范围函数。
移动依赖项$timeout的设置已针对控制器（而非函数）进行注册。

<强> HTML：

<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="app.js"></script>

  </head>

  <body ng-controller="m">

    {{value}}

    <button ng-click="CountDownCtrl()">Start</button>

  </body>
</html>

<强> JS：

var myApp = angular.module('myApp', []);
myApp.controller('m', ['$scope', '$timeout', function($scope, $timeout) {

 $scope.value = 0; 

$scope.CountDownCtrl = function() {

    $scope.value = 0;

    var change = function() {
        $scope.value += 1;
        $timeout(change,1000);
    };
    $timeout(change, 1000);
}

}]);

AngularJS：制作一个简单的秒表，有点困惑

2 个答案: