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

Answer 2

Angular已经有a指令，所以你可能不应该创建自己的指令。

在Angular世界中，为了“仅定位某个div”（好吧，在div中的＆lt; a＆gt;），我们声明地将目标定为＆lt; a＆gt;。使用指令，而不是使用类似CSS的选择器。所以是的，限制为'A'并将属性添加到＆lt; a＆gt;会是最好的：

<a ... target-this-one>...</a>

我个人认为这听起来更好。查看HTML，很清楚哪些＆lt; a＆gt; s具有特殊/附加功能。

@Josh指出，如果ng-click不足以满足您的需求，您只需要这样做。

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

2 个答案: