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 回答