Для решения задачи вам даже не нужна директива. Лучше и правильнее воспользоваться компонентом (
https://habrahabr.ru/post/277087/), связать свойства компанента start, pause (все значения являются булевскими) с одноименными атрибутами компонента (связывать лучше в одностороннем порядке). В самом компоненнте реализовать всю необходимую логику отсчтета (например через сервис $timeout -
https://docs.angularjs.org/api/ng/service/$timeout), не забываем делать отмену ожидания временного интервала через реализацию метода $onDestroy() в компоненте.
Контроллер же через установку своих свойств которые будут связаны с атрибутами компонента будет запускать и останавливать ваш секундомер
Вот пример как это работает
output.jsbin.com/camuvetixo
Вот код как это выглядит
//main.js
angular.module("myApp", []);
//app.component.js
angular.module("myApp").component("body", {
controller: MyAppComponent,
template: '<a href="javascript:void(0)" ng-click="$ctrl.OnStart()">start</a><br /><a href="javascript:void(0)" ng-click="$ctrl.OnStop()">stop</a><my-timer start="$ctrl.start"></my-timer>'
});
function MyAppComponent() {
this.start = false;
this.OnStart = function () {
this.start = true;
};
this.OnStop = function () {
this.start = false;
}
}
//timer.component.js
angular.module("myApp").component("myTimer", {
controller: MyTimerComponent,
bindings: { start: "<" },
template: "<div>{{$ctrl.time}}</div>"
});
function MyTimerComponent($timeout) {
var _start, _cancel, _time = 0;
function OnTime() {
_cancel = $timeout(OnTime, 1000);
_time++;
}
function Start() {
if (_start) return
_start = true;
_cancel = $timeout(OnTime, 1000);
}
function Stop() {
if (_start) {
$timeout.cancel(_cancel);
_time = 0;
_start = false;
}
}
Object.defineProperty(this, "start", {
get: function () {
return _start;
},
set: function (value) {
if (_start != value) {
if (value)
Start();
else
Stop();
}
}
});
Object.defineProperty(this, "time", {
get: function () {
return _time;
}
});
this.$onDestroy = Stop;
}
Средний
Средний
