2

我已经研究了几个小时了。

假设我有一个 $('#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 选择器一样布局前端。

4

2 回答 2

5

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上面使用的）。

于 2013-01-30T21:15:43.370 回答
1

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

在 Angular 世界中，为了“仅定位某个 div”（嗯，div 中的 <a>），我们使用指令声明性地定位该 <a>，而不是使用类似 CSS 的选择器。所以是的，限制为“A”并向 <a> 添加一个属性是最好的：

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

我个人认为这更好读。查看 HTML 可以清楚地看出哪些 <a> 具有特殊/附加功能。

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

于 2013-01-30T21:13:37.863 回答