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

Question

我现在已经研究了几个小时了.

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

如何在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内置的关注点分离:模型,视图,控制器,服务等,都是分开的.我们使用控制器将代码粘合在一起,但每个组件对其他组件一无所知.

因此,在jQuery中,可以使用选择器来查找匹配特定模式的所有链接,然后向其添加某个功能(比如单击处理程序),在AngularJS中,HTML是"官方记录".它不是将点击处理程序的附件抽象为JavaScript函数,而是将其放入标记中:

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

在这种情况下,doWhatever是一个关于页面部分范围的方法,可能在您的控制器中设置:

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

因此,您处理问题的方式不适用于AngularJS.相反,你需要查看指令,而不是像带有函数的jQuery选择器,而是作为HTML的扩展.你问自己,"HTML不能开箱即用,我需要它做什么？" 你的答案是你的指示.

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