javascript - 如何在 Angular Directive(指令)中获取当前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 一起使用并在 angular 之前加载 jquery，则元素将被包装在 jquery 包装器中，即它将是一个 jquery 对象。如果不是 Angular，则使用称为 jqlite 的 jquery 的较轻的子集。它只提供了最少的功能。

参见 element了解详情。

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

您的指令的示例实现如下所示。您可以通过多种方式使用 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:"="}, 如果您希望通过属性绑定(bind)来自父范围的数据，则设置 2 种方式绑定(bind)。

• 不要重复 li，而是使用数据模型，比如一个项目数组，并使用 ng-repeat 而不是复制标签(除非您需要这样做它肯定)。例如:- ng-repeat="item in items"

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

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

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