如何在jQuery onClick函数中呈现AngularJS数据绑定?

时间:2016-06-09 23:32:22

标签: jquery angularjs

所以我的问题是当我尝试在jQuery onclick函数中渲染AngularJS数据绑定时,它不会渲染数据绑定onclick="startTimer({{ $index }},{{ product.time }})"

但是当我使用ng-click="startTimer({{ $index }},{{ product.time }})"这已经渲染时,但问题是ng-click obyously并没有在我的jQuery脚本中启动该函数

<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>

所以我只是想找到一个在onclick上渲染数据绑定的方法,并且不要使用ng-click来渲染绑定。

但是你可以在这里查看项目https://plnkr.co/edit/m1R1PesR0HoblSaN6M1T?p=preview,你可以看到如何将onclick更改为ng-click这个渲染,但是不要启动jquery功能,你也可以看到如何将onclick="startTimer({{ $index }},{{ product.time }})"更改为{{ 1}}工作得很完美,但我需要使用AngularJS的数据库。

知道如何在onclick上渲染数据绑定吗?

1 个答案:

答案 0 :(得分:0)

如果你必须以这种方式运行代码,那么下面的代码应该可行。(另外请查看角度特定的实现)

将此添加到onClick函数:

var scope= $(".claimButton").scope();
scope.$apply();