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

问题描述：

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

根据您提供的任何细节，您可以创建隔离范围的角度指令以满足您的要求。 – Chandermani

@Chandermani这就是我现在正在工作 - 谢谢。一旦我创建了指令，我将如何通过用户交互来复制它？对不起，缺乏广泛的细节。关于这个话题的细节毕竟是我的问题的症结所在。有没有问题的某个方面可以进一步解释？ – Jbird

答

正如@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指令将为timers数组中的每个项目呈现timer指令的一个实例。在这个人为的例子中，除了控制同时存在多少个定时器之外，该数组没有任何目的。您可以使用它来存储关于每个计时器的任何信息。

谢谢@MichaelBenford--这确实让我开始了！ – Jbird

答

您可以创建一个管理定时器列表控制

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/

“计时器”对象的代码示例是你想自己写一些东西，所以我我们只是用一种实际上没有做任何事情的物体来扼杀它。正如所建议的那样，指令是包装定时器渲染的好方法。

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

相关推荐