如何在 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;
                        });                 
        }

Answer 1

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

详情见element。

而不是手动绑定 hover 事件，您应该使用 angular 事件绑定并使用 ng-class 而不是 add/remove class。这样你就可以以 angular 的方式执行事情，并且你不需要通过 scope.$apply() 手动调用摘要循环来进行范围更新的 DOM 更新（你需要在悬停伪事件中执行此操作在您的示例中，根据范围属性 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:"="}, 如果您希望通过属性从父作用域绑定数据，则设置 2 种方式绑定。
而不是重复 li 使用数据模型，说一个项目数组并使用 ng-repeat 而不是复制标签（除非你确实需要这样做） .例如：- ng-repeat="item in items"
使用angular事件绑定而不是手动绑定事件，悬停只是nouseenter/mouseleave。因此，您可以使用各自的 angular 指令并在作用域上绑定一个函数。即 ng-mouseenter="toggleClass(true)" ng-mouseleave="toggleClass(false)".
使用绑定到范围变量的 ng-class 来切换 class。让 angular 管理 DOM 操作以切换元素上的 css class。您只是担心 数据被绑定。即 ng-class="{'highlight': action.deleteicon}"

您可以在 directives/components.

中找到关于 angular 的官方文档

Answer 2

好吧，您使用了 hover，但是，您可以使用 MouseOver Directive。

如下例：

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

Answer 3

Look at this 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'];
            });

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

How to get current dom element in angular directive

javascript

angularjs

dom

angularjs-directive

angularjs-scope