I have the following directive that I have taken from google (to create a chronometer):
.directive('cronometro', function () {
var stopWatch = function(elem, options, attrs) {
var hora = 0;
if (attrs.start == 0) {
//alert('Sin inicialziar');
var tiempo_inicial = 0;
} else {
hora = attrs.start.split(":");
}
var timer = createTimer(),
startButton = createButton("►", start),
//stopButton = createButton("∎", stop),
resetButton = createButton("↻", reset),
offset,
clock,
interval;
// default options
options = options || {};
options.delay = options.delay || 150;
// append elements
elem.appendChild(timer);
elem.appendChild(startButton);
//elem.appendChild(stopButton);
elem.appendChild(resetButton);
// initialize
reset(false);
// private functions
function createTimer() {
var div = document.createElement("div");
div.id = "contenedor_crono";
return div;
}
function createButton(action, handler) {
var button = document.createElement("button");
button.innerHTML = action;
button.className = "boton_crono";
button.addEventListener("click", function(event) {
handler();
event.preventDefault();
});
return button;
}
function start() {
if (!interval) {
offset = Date.now();
interval = setInterval(update, options.delay);
} else {
clearInterval(interval);
interval = null;
}
}
function reset(reseteo) {
if (reseteo !== false) {
hora = '00:00:00:000'.split(":");
}
clock = 0;
render();
}
function update() {
clock += delta();
render();
}
function getClockInfo() {
var hours = Math.floor( ((clock/1000) / 60) / 60 ),
minutes = Math.floor( ((clock/1000) / 60) - hours * 60 ),
seconds =
Math.floor(
(clock/1000) -
(minutes * 60) -
(hours * 60 * 60)
),
milliSeconds =
Math.floor(
clock -
(seconds * 1000) -
(minutes * 60 * 1000) -
(hours * 60 * 60 * 1000)
);
return {
'hours' : hours,
'minutes' : minutes,
'seconds' : seconds,
'milliSeconds' : milliSeconds,
};
}
function render() {
var clockInfo = getClockInfo();
var horaCrono = parseInt(hora[0]) + parseInt(clockInfo.hours.toString());
var minutoCrono = parseInt(hora[1]) + parseInt(clockInfo.minutes.toString());
var segundoCrono = parseInt(hora[2]) + parseInt(clockInfo.seconds.toString());
var milesimasCrono = parseInt(hora[3]) + parseInt(clockInfo.milliSeconds.toString());
if (milesimasCrono > 999) { milesimasCrono = 999;} //temporal fix
//console.log(milesimasCrono) ;
/**/ timer.innerHTML =
'<div class="reloj_crono" id="Horas">' + horaCrono.toString().zeroPad(2) + ':</div>' +
'<div class="reloj_crono" id="Minutos">' + minutoCrono.toString().zeroPad(2) + ':</div>' +
'<div class="reloj_crono" id="Segundos">'+ segundoCrono.toString().zeroPad(2) + ':</div> ' +
'<div class="reloj_crono" id="Centesimas">'+ milesimasCrono.toString().zeroPad(2)+'</div>'
;/**/
}
function delta() {
var now = Date.now(),
d = now - offset;
offset = now;
return d;
}
// public API
this.start = start;
this.reset = reset;
};
return {
restrict: 'E',
//transclude: true,
replace: true,
scope: { },
link: function (scope, element, attrs) {
var sw = new stopWatch(element[0],element,attrs);
}
};
})
In the html I have the following:
<cronometro start="{{inicio_crono}}" value="valor_crono"></cronometro>
I give the buttons and it works correctly, but I am not able to put $ scope.valor_crono the value of the chronometer.
In the link (of the directive) I tried with obj.value and with attrs.value , without success
How do I update the scope with the value that the directive has?