Question

我正在AngularJS中创建一个时间跟踪应用程序，只是为了学习框架。我正在尝试通过单击“添加”按钮创建在单个视图中添加多个计时器的功能。每个计时器显然都包含用于计时功能的唯一属性和唯一方法。我无法绕过如何设置服务来做这样的事情。任何帮助将不胜感激。

Answer 1

正如@Chandermani所提到的，你应该将你的计时器包装在一个指令中。这应该让你开始：

<强>的Javascript

app.controller('MainCtrl', function($scope) {
  $scope.timers = [];
})
.directive('timer', function() {
  return {
    restrict: 'E', 
    template: '<h1>{{counter}}s</h1>',
    controller: function($scope, $timeout) {
      $scope.counter = 0;

      var callback = function() {
        $scope.counter++;
        $timeout(callback, 1000);
      };

      $timeout(callback, 1000);
    }
  };
});

<强> HTML

<body ng-controller="MainCtrl">
    <button ng-click="timers.push(1)">Add timer</button>
    <timer ng-repeat="timer in timers"></timer>
</body>

Plunker here。

ng-repeat指令将为timer数组中的每个项呈现timers指令的一个实例。在这个人为的例子中，除了控制一次存在多少定时器之外，该阵列没有任何目的。您可以使用它来单独存储有关每个计时器的任何信息。

Answer 2

您可以创建一个管理计时器列表的控件

var app = angular.module('myApp');

app.controller('TimerCtrl', function($scope) {
  $scope.timers = [];
  $scope.addTimer = function() {
    $scope.timers.push(new TaskTimer());
  };
  /* additional remove/clear/whatever functions attach to $scope */
});

代码示例：http://jsfiddle.net/bonza_labs/qvnNa/

代码示例中的“timer”对象是您自己想要写的东西，所以我只是用一个实际上没有做任何事情的对象来删除它。正如所建议的那样，指令是结束计时器渲染的好方法。

如何在AngularJS中创建多个功能实例？

2 个答案: