如何在角度指令中获取当前 dom 元素

Question

我是 angularjs 的新手，就像许多其他开发人员一样，我是 jquery 开发人员。现在我有一个关于指令的问题。 例如：如果我有这样的指令：

app.directive('mydiv',function(){
     return{
     restrict:'AE',
     template:'<div><ul><li></li><li></li><li></li></ul></div>', //of course in real case it will be use ng-repeat
     link:function(scope,element,attr){

     }
}               
})

我的困惑是，如果我需要访问任何

元素，在 jquery 中我们可以使用 $(this)，我们如何使用 angular 方式来做到这一点？我可以这样做：

link: function (scope, element, attrs) {    //when hover show the delete icon for each msg and apply highlight class to it.
                element.find('li').hover(
                        function(){
                            $(this).addClass('highlight');
                            scope.deleteicon=true;
                        },
                        function(){
                            $(this).removeClass('highlight');
                            scope.deleteicon=false;
                        });                 
        }

Answer 1

您可以将元素作为链接函数本身的第一个参数（在您的情况下为element 参数）访问。如果您使用带角度的 jquery 并在 angular 之前加载 jquery，则元素`将被包装在 jquery 包装器中，即它将是一个 jquery 对象。如果不是 Angular，则使用称为 jqlite 的较轻的 jquery 子集。它只提供了一个最小的功能。

详情请见element。

您应该使用角度事件绑定并使用 ng-class 而不是添加/删除类，而不是手动绑定 hover 事件。这样您就可以以角度方式执行操作，并且您不需要通过 scope.$apply() 手动调用摘要循环以进行与范围更新相关的 DOM 更新（您需要在示例中的悬停伪事件中执行此操作以反映基于范围的 DOM 更新属性deleteicon)。

您的指令的示例实现如下所示。您可以通过多种方式使用 Angular 内置指令本身来完成此操作。

.directive('mydiv',function(){
     return {
     restrict:'AE',
     scope:{items:"="}, //<-- data bound from parent scope via attribute
     template:'<div><ul><li ng-mouseenter="toggleClass(true)" ng-mouseleave="toggleClass(false)" ng-class="{'highlight': action.deleteicon}" ng-repeat="item in items">{{item.name}}</li></ul></div>', //of course in real case it will be use ng-repeat
     link:function(scope,element,attr){
        scope.action = {deleteicon :true};
        scope.toggleClass = function(show){
             scope.action.deleteicon = show;
        }
     }
   }               
});

• scope:{items:"="}, 如果您希望通过属性绑定来自父作用域的数据，则设置 2 路绑定。

• 不要重复li，而是使用数据模型，比如一个项目数组并使用ng-repeat，而不是复制标签（除非你需要确定这样做）。例如：- ng-repeat="item in items"

• 使用角度事件绑定而不是手动绑定事件，悬停只是 nouseenter/mouseleave。因此，您可以使用各自的角度指令并在作用域上绑定一个函数。即ng-mouseenter="toggleClass(true)" ng-mouseleave="toggleClass(false)"。

• 使用绑定到范围变量的ng-class 来切换类。让 Angular 管理 DOM 操作以切换元素上的 css 类。您只需担心数据被绑定。即ng-class="{'highlight': action.deleteicon}"

您可以找到有关 Angular 内置指令/组件的官方文档。