How to get current dom element in angular directive

Question

I am new to angularjs, like many other developers, I was a jquery developer. Now I have a question about the directive. For example: if I have a directive like this:

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){

     }
}               
})

I have confusion if I need to access any element

in jquery we can use $ (this), how can we do this with angular? Can I do the following:

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 angular, ` jquery, jquery. angular jquery, jqlite. .

. element.

hover angular ng-class add/remove. angular, scope.$apply() DOM ( - hover , DOM scope 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:"="}, , .

• li , , ng-repeat ( ). ex: - ng-repeat="item in items"

• angular , hover - , nouseenter/mouseleave. , angular . i.e ng-mouseenter="toggleClass(true)" ng-mouseleave="toggleClass(false)".

• ng-class, . angular DOM- css . . i.e ng-class="{'highlight': action.deleteicon}"

angular, /.

Answer 2

, hover, MouseOver Directive.

:

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

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>

Script:

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