프레임 워크를 배우기 위해 AngularJS에서 시간 추적 앱을 만들고 있습니다. '추가'버튼을 클릭하여 단일보기에서 여러 타이머를 추가 할 수있는 기능을 만들려고합니다. 각 타이머에는 고유 한 특성과 고유 한 타이밍 기능 기능이 포함되어 있습니다. 그런 일을 할 수있는 서비스를 어떻게 설정할 수 있는지에 대해 머리를 감싸는 데 어려움을 겪고 있습니다. 어떤 도움이라도 대단히 감사하겠습니다.AngularJS에서 지형지 물의 여러 인스턴스를 만드는 방법은 무엇입니까?
@Chandermani가 언급했듯이, 지시문 안에 타이머를 넣어야합니다. 이것은 당신이 시작할 수 있어야합니다
자바 스크립트
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/
코드 예제에서 "타이머"객체는 자신이 쓰고 싶은 것이 뭔가, 그래서 실제로 아무 것도하지 않는 물건으로 그걸 찔렀다. 제안 된대로 지시문은 타이머 렌더링을 마무리하는 좋은 방법입니다.
제공 한 세부 정보에 따라 분리 된 범위로 각도 지시문을 작성하여 요구 사항을 충족시킬 수 있습니다. – Chandermani
@ Chandermani 그게 바로 지금 제가하고있는 일입니다 - 고마워요. 지시어를 작성한 후에는 사용자 상호 작용을 통해 어떻게 복사합니까? 광범위한 세부 사항이 부족해서 죄송합니다. 이 주제에 관한 세부 사항은 제 질문의 핵심입니다. 더 자세히 설명 할 수있는 질문의 특정 측면이 있습니까? – Jbird