如何在AngularJS中創建多個功能實例？

我在AngularJS中創建一個時間跟蹤應用程序，只是爲了學習框架。我試圖通過單擊「添加」按鈕來創建在單個視圖中添加多個定時器的功能。每個計時器顯然將包含用於計時功能的獨特屬性和獨特方法。我不知道如何設置服務來做這樣的事情。任何幫助將不勝感激。如何在AngularJS中創建多個功能實例？

來源

2013-09-16 Jbird

根據您提供的任何細節，您可以創建隔離範圍的角度指令以滿足您的要求。 – 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指令的一個實例。在這個人爲的例子中，除了控制同時存在多少個定時器之外，該數組沒有任何目的。您可以使用它來存儲關於每個計時器的任何信息。

來源

2013-09-16 19:18:51

謝謝@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/

「計時器」對象的代碼示例是你想自己寫一些東西，所以我我們只是用一種實際上沒有做任何事情的物體來扼殺它。正如所建議的那樣，指令是包裝定時器渲染的好方法。

來源

2013-09-16 20:06:51 craigb

如何在AngularJS中創建多個功能實例？

回答

相關問題