javascript - AngularJS 触发功能单击 anchor 链接

Question

我希望有人可以帮助我实现一种在单击具有特定 css 类的 anchor 链接时触发功能的简洁有效的方法。

我可以使用 ng-click 来做到这一点，但我觉得这是一个有点困惑且无法维护的解决方案:这意味着将 ng-click 添加到每个我要跟踪的 anchor 链接。

我的导航链接目前看起来像这样:

<li id="item1" class="foo"><a href="#/item1">CLICK ME</a></li>

我想以类似于以下 JQuery stubb 的方式模拟 ng-click 的功能(这在我的配置中似乎不起作用):

$('.foo a').on('click', function(){
    //do some code 
});

tl;dr

我想要一种 AngularJS 方法来在单击具有特定 css 类的元素时执行函数。

如果我对此描述得不够好，请告诉我。

提前致谢

约翰

Answer 1

您可以编写指令并将其应用于根元素。

DEMO

<div ng-app="app" foo-dir>
    <li id="item1" class="foo"><a href="#/item1">CLICK ME 1</a>

    </li>
    <li id="item2" class="foo"><a href="#/item2">CLICK ME 2</a>

    </li>
</div>

JavaScript

var app = angular.module("app", []);

app.directive("fooDir", function () {
    return {
        link: function ($scope) {
            $(".foo a").on("click", function (event) {
                alert($(this).html());
            });
        }
    }
});