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

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

javascript angularjs

Javascript 如何在AngularJS中创建功能的多个实例？,javascript,angularjs,Javascript,Angularjs,我正在AngularJS中创建一个时间跟踪应用程序，只是为了学习这个框架。我试图通过单击“添加”按钮来创建在单个视图中添加多个计时器的功能。每个计时器显然都包含用于计时功能的唯一属性和唯一方法。我很难理解如何设置一个服务来做这样的事情。任何帮助都将不胜感激。正如@Chandermani所提到的，您应该将计时器包装在指令中。这应该让你开始： Javascript app.controller('MainCtrl', function($scope) { $scope.timers = [];

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

正如@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);
    }
  };
});

app.controller（'MainCtrl'，函数（$scope）{
$scope.timers=[]；
})
.directive（'timer'，function（）{
返回{
限制：'E'，
模板：“{counter}}s”，
控制器：函数（$scope，$timeout）{
$scope.counter=0；
var callback=function（）{
$scope.counter++；
$timeout（回调，1000）；
};
$timeout（回调，1000）；
}
};
});

HTML

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


添加计时器

普朗克

ng repeat

指令将为

timers

数组中的每个项目呈现一个

timer

指令实例。在这个人为设计的示例中，该数组除了控制一次存在多少个计时器之外，没有任何用途。您可以使用它单独存储关于每个计时器的任何信息

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

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 */
});

代码示例：

代码示例中的“timer”对象是您希望自己编写的对象，因此我用一个实际上什么都不做的对象将其删除。正如所建议的，指令是结束计时器渲染的一种很好的方法。

根据您提供的任何小细节，您都可以创建具有隔离范围的角度指令来满足您的要求。@Chandermani这就是我现在正在研究的-谢谢。一旦我创建了指令，我将如何通过用户交互复制它？很抱歉，缺少详细的信息。关于这个话题的细节毕竟是我问题的关键。我可以进一步解释这个问题的某个方面吗？谢谢@MichaelBenford-这确实会让我开始！