How to render AngularJS databinding in jQuery onClick function?

Question

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?

This is simply not the way to work with angular. Strongly suggest reading Thinking in angular when I have a jQuery background — charlietfl
– charlietfl, Commented Jun 9, 2016 at 23:38
I Want to find a solution like this <a ng-click="yourVar = 42">Go</a> to this <a onclick="var $scope = angular.element(event.target).scope(); $scope.yourVar = 42; $scope.$apply()">Go</a> — Johan
– Johan, Commented Jun 9, 2016 at 23:42
But I Don't know how to apply something like this in my code. — Johan
– Johan, Commented Jun 9, 2016 at 23:42

Don · Accepted Answer · 2016-06-09 23:47:59Z

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();

answered Jun 9, 2016 at 23:47

Don

1,3341 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Johan Over a year ago

Can you help me to apply in the plunker? because is not working for me

Collectives™ on Stack Overflow

How to render AngularJS databinding in jQuery onClick function?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related