CODEWITHSUNDEEP
jqueryangularjsevents
DaveC426913
DaveC426913

Reputation: 2046

how to get target of an angular event?

Maybe I'm looking in the wrong place. I just want to manipulate the DOM of the target of an event. As you can see, I'm mashing some jquery in there.

How does angular give me the DOM object so I can manipulate its relatives? i.e. what are the valid properties of ev? I would have thought that ev.target or ev.currentTarget gave me the DOM object.

<div class="table-cell">
  <a ng-mouseover="rollover(this)">Go<div class="tip">Tooltip</div></a>
</div>

$scope.rollover = function(ev){
  $(ev).parents('.table-cell').css('overflow','visible');
  $(ev).find('.tip').show();
};

Upvotes: 0

Views: 1042

Answers (1)

Darshan P
Darshan P

Reputation: 2241

ng-mouseover="rollover(this)"

this keyword refers to scope. You need to pass $event in your rollover function then use $event.target.

<a ng-mouseover="rollover($event)">Go<div class="tip">Tooltip</div></a>

But you should create directive if you want to manipulate DOM.

<a my-dir>Go<div class="tip">Tooltip</div></a>

app.directive("myDir", function () {
  return {
    link: function (scope, element, attrs) {
        $(element).on("mouseover", function () {
            $(element).parents('.table-cell').css("background-color", "yellow");
            $(element).find('.tip').toggle();
        });
    }
  };
});

DEMO

Upvotes: 2

Related Questions