Mi problema está en este onclick="startTimer({{ $index }},{{ product.time }})
. Cuando trato de renderizar los bindings utilizando onclick
simplemente no sucede nada. Cuando lo hago con ng-click
se renderizan a la perfección, pero el script de jQuery no se ejecuta con ng-click
. Pueden verlo en detalle en este código en plnkr. Al utilizar onclick="startTimer(0,5)"
todo funciona bien pero al querer dar los argumento con databindings de AngularJS los datos no se renderizan. ¿Alguna idea de cómo resolver el problema?
-
Bienvenido a "SO en Español". La pregunta se entiende perfectamente, con mejor nivel de español que otras que se ven por aquí hechas por gente que lo habla toda su vida. Espero que disfrutes de esta comunidad.– ChemaCortesel 10 jun. 2016 a las 7:47
-
Gracias, hago mi mejor esfuerzo.– Johanel 10 jun. 2016 a las 7:59
1 respuesta
Lo primero es que no puedes combinar las funciones de javascript y angular implícitamente:
onclick="startTimer({{ $index }},{{ product.time }})"
Esto no te va a funcionar nunca porque el navegador lo interpreta como un string, por eso es que solo te funciona el ng-click
La solucion que veo es que uses ng-click, porque va ser la unica forma que recuperes las variables del ng-repeat
Reemplaza esto
<div class="claimButton claimActive">
<a href="{{ product.url }}" target="_blank"
onclick="startTimer({{ $index }},{{ product.time }})">CLAIM</a>
</div>
por esto
<div class="claimButton claimActive">
<a href="{{ product.url }}" target="_blank"
ng-click="startTimer($index,$product.time)">CLAIM</a>
</div>
y agrega esta funcion en tu controlador
$scope.startTimer = function(id, time) {
$("#" + id).next("div").removeClass("claimActive");
$("#" + id).next("div").addClass("claimWait");
$("#" + id).removeClass("timerActive");
$("#" + id).addClass("timerWait");
$("#" + id).next("div").children("a").text("WAIT");
if (time <= 60) {
if (time < 10) $("#" + id).children("#m").text("0" + time);
else $("#" + id).children("#m").text(time);
$("#" + id).children("#s").text("30");
} else {
if (time < 600) $("#" + id).children("#h").text("0" + time / 60);
else $("#" + id).children("#h").text(time / 60);
$("#" + id).children("#m").text("00");
$("#" + id).children("#s").text("30");
}
}
Te dejo un Plunker
-
Esto era lo que estaba buscando, muchas gracias a ti, pero ahora tengo este error
NaN:00:30
en el contador, creo que es porque en el controlador no esta la otra parte del jQuery Scriptfunction checkTimers()...
, ¿Como puedo agregar estar parte que hace falta en el controlador?– Johanel 10 jun. 2016 a las 7:57 -
Ya corregí el error, había una mala escritura en el databinding
$product.time
la escritura correcta esproduct.time
, ¡Merci Beaucoup!– Johanel 10 jun. 2016 a las 9:25 -
Perfecto @Johan , si la respuesta te sirvió no olvides marcarla :)– marjesel 10 jun. 2016 a las 16:13