0

So my problem is when I try to render AngularJS databinding in jQuery onclick function, it doesn't render the databinding onclick="startTimer({{ $index }},{{ product.time }})"

But when I use ng-click="startTimer({{ $index }},{{ product.time }})" this already render, but the problem is that ng-click obyously doesn't start the function in my jQuery Script 

<script>
function startTimer(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");
    }
}

function checkTimers() {
$(".timer").each(function() {
    seconds = parseInt($(this).children("#h").text()) * 3600 + parseInt($(this).children("#m").text()) * 60 + parseInt($(this).children("#s").text());
    if (seconds > 0) {
        hours = parseInt($(this).children("#h").text());
        min = parseInt($(this).children("#m").text());
        sec = parseInt($(this).children("#s").text());
        if (sec > 0) {
            if (sec > 10) $(this).children("#s").text(sec - 1);
            else $(this).children("#s").text("0" + (sec - 1));
        } else if (min > 0) {
            if (min > 10) $(this).children("#m").text(min - 1);
            else $(this).children("#m").text("0" + (min - 1));
            $(this).children("#s").text(59);
        } else if (hours > 0) {
            if (hours > 10) $(this).children("#h").text(hours - 1);
            else $(this).children("#h").text("0" + (hours - 1));
            $(this).children("#m").text(59);
            $(this).children("#s").text(59);
        }
    } else {
        $(this).next("div").removeClass("claimWait");
        $(this).next("div").addClass("claimActive");
        $(this).addClass("timerActive");
        $(this).removeClass("timerWait");
        $(this).next("div").children("a").text("CLAIM");
    }
});
}
$(document).ready(function() {
setInterval(checkTimers, 1000);
});
</script>

So I just wand to find a method to render the databinding in onclick and dont use ng-click for render the binding.

However you can check the project here https://plnkr.co/edit/m1R1PesR0HoblSaN6M1T?p=preview and you can see how changing the onclick to ng-click this render but dont initiate the jquery function and too you can see how changing onclick="startTimer({{ $index }},{{ product.time }})" to onclick="startTimer(0,5)" works perfect, but I need to use the databending from AngularJS.

Any idea how I Can render the databinding in onclick?

Tommy
  • 39,592
  • 10
  • 90
  • 121
Johan
  • 159
  • 1
  • 9
  • 2
    This is simply not the way to work with angular. Strongly suggest reading [Thinking in angular when I have a jQuery background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – charlietfl Jun 09 '16 at 23:38
  • 1
    I Want to find a solution like this `Go` to this `Go` – Johan Jun 09 '16 at 23:42
  • But I Don't know how to apply something like this in my code. – Johan Jun 09 '16 at 23:42

1 Answers1

0

If you have to run the code this way only then below should work.(Else look for angular specific implementation)

Add this to onClick function:

var scope= $(".claimButton").scope();
scope.$apply();
Don
  • 1,334
  • 1
  • 10
  • 18