Question

我是javascript和JQuery的新手。我们正在定制在Angular1中开发的第三方应用程序，我们无法访问其源代码，但是，我们可以在它上面运行我们的自定义脚本。在这里，我必须根据某些条件启用或禁用div标签上的click事件。以下是源代码。

<div class="uc-ok"
    data-ng-class="{'disabled': getButtonDisabled()}"
    data-ng-click="selectAndClose($event)"
    style="display: block;">OK</div>

我尝试了以下方法，

$('.uc-ok').addClass("disabled");// for disabling it

$('.uc-ok').removeClass("disabled");//for enabling it again

在这种情况下，该按钮似乎被禁用，但仍然单击功能正在处理已禁用的按钮。

我试过了，

$('.uc-ok').off("click");

$('.uc-ok').on("click");

在这种情况下，点击功能完全关闭，无法打开。当打开它时，应该调用实际的selectAndClose(event)。

请帮助我解决我在这里失踪的问题。

Answer 1

为了影响任何有角度的东西，修改元素后，需要根据元素的范围重新编译它。

function removeClickHandler()//call this to remove the click handler
{
    var button = document.getElementsByClassName("uc-ok")[0];//button object
    button.removeAttribute("data-ng-click");
    angularCompile(button);
}

function addClickHandler()//call this to add it back in
{
    var button = document.getElementsByClassName("uc-ok")[0];//button object
    button.setAttribute("data-ng-click", "selectAndClose($event)");
    angularCompile(button);
}    

function angularCompile(node)//only works if app uses ng-app attribute
{
    angular.element("[ng-app]").injector().invoke(function($compile) {
        var scope = angular.element(node).scope();
        $compile(node)(scope);
    });     
}

Answer 2

幸运的是，有一个简单的CSS选项可用于禁用与HTML元素的交互。您可以使用pointer-events属性禁用元素上的鼠标事件。

所以最简单的方法就是将其添加到.disabled类样式中：

/*css*/
.disabled {
    pointer-events: none;
}

它将不再接收鼠标点击。

使用JQuery打开/关闭Angular1 data-ng-click事件

2 个答案: