如何在Angular指令中获取当前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;
                        });                 
        }

- linyuanxie

---

在你的链接函数中，你有一个名为“element”的注入参数，它将是一个jqLite元素。 - Himmet Avsar

Answer 1

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

有关详细信息，请参见element。

与其手动绑定hover事件，您应该使用angular事件绑定，并使用ng-class代替添加/删除类。这样，您就可以按照angular方式执行操作，而且不需要手动通过scope.$apply()调用digest周期，以便针对作用域更新进行DOM更新（在您的示例中的hover伪事件中，您需要这样做才能基于作用域属性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:"="} 设置双向绑定，如果你想通过属性绑定来自父作用域的数据。

• 使用数据模型代替重复的 li 标签，比如一个项目数组，并使用 ng-repeat 代替重复标签（除非你必须这样做）。例如： ng-repeat="item in items"

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

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

您可以在 Angular 内置指令/组件的官方文档中找到更多信息。

- PSL

---

谢谢您的信息！但是如果我需要在每个<li>上执行其他操作，例如：<li>{{items.name}}<span>删除</span></li>当我点击删除（span）时，我需要删除整个li，实际上它会触发一个ajax调用。我所需要做的就是将删除函数绑定到<span>中？像这样：<span ng-click='deletecurrentli('items.name')'>当然，我需要在控制器中定义删除函数。我传递到函数中的items.name是指当前li吗？ - linyuanxie

只需将ng-click绑定到span并传递项目，然后从列表中分离出它。 - PSL

Answer 2

嗯，你使用了hover，但是你可以使用MouseOver指令。

如下面的例子：

<li ng-mouseover="high = true" ng-class="{'highlight':high}">Content</li>

- klauskpm

---

你不需要某种鼠标移出事件吗？ - tommybananas

Answer 3

看看这个 plkr

标记：

<div class="row" ng-app="myapp" ng-controller="myctrl">
        <div class="col-lg-3 col-lg-push-3">
            <ul class="list-group">
                <li class="list-group-item" ng-init="myclass='hide'" ng-repeat="item in items"
                    ng-mouseenter="myclass = 'show'" ng-mouseleave="myclass='hide'">
                    <span>{{item}}</span>
                    <span ng-class="'pull-right glyphicon glyphicon-edit '+myclass"></span>
                </li>
            </ul>
        </div>
    </div>

脚本：

angular.module('myapp', [])
            .controller('myctrl', function ($scope) {
                $scope.items = ['abc', 'xyz', 'klm'];
            });

- mia