angularjs - 如何在不更改标记的情况下仅使用相同指令定位某些元素？

Question

我已经研究这个问题几个小时了。

假设我有一个 $('#bottom .downloads .links a').click 的 jQuery 选择器......

如何在 Angular 指令中执行相同类型的操作？

这是我到目前为止所拥有的并且它有效，但适用于页面上的所有标签。

angular.module('directives', []).directive('a', function(mongoDB){ //Don't need ['customServices'], it can just be [] to use mongoDB
return {
    restrict : 'E',
    link : function(scope, element, attrs){     
    element.on('click', function(){
        //But this gets called for all links on the page
                //I just want it to be links within the #bottom .downloads .links div
                //I wanted to use a directive instead of ng-click="someMethod()"
    });
}

});

有没有办法将此指令仅定位到某个 div？我想我可以将限制更改为“C”或“A”并向链接添加属性，但我想知道是否仍然可以像我目前习惯的 jQuery 选择器一样布局前端。

Answer 1

AngularJS 和 jQuery 之间存在相当显着的哲学差异。在 jQuery 中，所有内容都在 DOM 中(包括您的数据)，并且您可以通过 DOM 转换完成所有操作。另一方面，AngularJS 内置了关注点分离:模型、 View 、 Controller 、服务等都是独立的。我们使用 Controller 将代码粘合在一起，但每个组件对其他组件一无所知。

因此，在 jQuery 中，人们可能会使用选择器来查找与特定模式匹配的所有链接，然后向其添加特定功能(例如单击处理程序)，而在 AngularJS 中，HTML 是“官方记录”。它不是将点击处理程序的附件抽象为 JavaScript 函数，而是直接放入标记中:

<a ng-click="doWhatever()">Click me!</a>

在本例中，doWhatever 是页面该部分范围内的一种方法，可能在您的 Controller 中设置:

$scope.doWhatever = function () {
  console.log("Hello!");
}

所以你解决这个问题的方式在 AngularJS 中是行不通的。相反，您需要将指令视为不像带有函数的 jQuery 选择器，而是将其视为 HTML 扩展。你会问自己，“HTML 没有做什么我需要它做的事？”你的答案就是你的指令。

但是 AngularJS 已经有一个用于点击处理程序的内置指令(上面使用的 ngClick)。