Get element inside ngClick directive

Question

Is it possible to get current element object inside ngClick directive. For example:

<div data-ng-click=" $element.hide() "> ... </div>

where $element is jquery wrapper for div element. I know that I can write my own directive for this, but I dont want to do it for every trivial task. Maybe someone has an idea?

use ng-show or ng-hide. The model property you set can automatically show/hide the element based on its truthy-ness. — Crowcoder, Sep 20 '14 at 13:40
@Crowcoder hide() method is used just for example purpose. Actually I have a little more complicated task. — alexpods, Sep 20 '14 at 14:15
Not sure you can as angular does not allow referencing dom nodes in expressions e.g try ng-click="$event.target.css('color','red')". See [Referencing a DOM node in Expression](https://docs.angularjs.org/error/$parse/isecdom) — Gruff Bunny, Sep 20 '14 at 14:50
@GruffBunny Somehow this part of documentation slipped from me. Thanks, man for pointing it! It's pity that angular does not allow manipulate dom elements in expressions. — alexpods, Sep 22 '14 at 09:37

score 0 · Answer 1 · answered Sep 20 '14 at 13:42

0

Working DEMO

You can do it in your controller better:

function HomeCtrl($scope, $element) {
  $scope.hideElement = function() {
    $($element).hide();
  }
}

HTML:

<div data-ng-click="hideElement()">Hide me</div>

answered Sep 20 '14 at 13:42

mohamedrias

18,326
2
38
47

DOM manipulation iside controller is considered as bad practice and I tottally agree with that. Of course using javascript code in html is cosidered bad too. But many times it's very convenient and it's angular way. – alexpods Sep 20 '14 at 14:08
By the way: you can't get element using $element in controller (There is no such provider in angular). You can get element by it's id: 'var $element = $("#element-id")'. But I don't want to dirty HTML code with elements ids. – alexpods Sep 20 '14 at 14:09
As the OP doesn't want to create directive for this, i suggested this solution. @alexpods btw did you had chance to check the jsbin demo? It's working fine – mohamedrias Sep 20 '14 at 14:11
Year it's working. @mohamedrias sorry, I was wrong. Up your answer, but not mark as 'accepted'. Maybe someone suggest something else. – alexpods Sep 20 '14 at 14:21
Great. If none suggests better answer, accept it later ;) – mohamedrias Sep 20 '14 at 14:23
This doesn't work. It doesn't hide the
element, but the whole . $element is in a controller the element where you've applied ng-controller to, which means here it's the body.
– Marc J. Schmidt Sep 20 '14 at 17:32

score 0 · Accepted Answer · answered Sep 20 '14 at 17:43

0

In ng-click you always have also the native event, which is provided via $event.

So you can do something like this:

$scope.hideElement = function($event) {
    $($event.target || $event.srcElement).hide();
}

and use it in your template like:

<div data-ng-click="hideElement($event)">Hide me</div>

Demo: http://jsfiddle.net/bezLr0f5/

answered Sep 20 '14 at 17:43

Marc J. Schmidt

8,302
4
34
33

Actually best answer was from @GruffBunny in comment. I didn't know that angular does not allow referencing dom nodes in expression. It's so pity! It's looks like that only solution is to define you own method in controller (or write you own directve of course, but in my situation is not appropriate). So mark you answer as accepted. – alexpods Sep 22 '14 at 09:42

score 0 · Answer 3 · edited May 23 '17 at 12:12

0

Use ng-hide

<div data-ng-hide="hideIt" data-ng-click="hideIt = true">Hide Me</div>

Or you can create a directive, which has animations as well https://stackoverflow.com/a/25953153/4062004

edited May 23 '17 at 12:12

Community

1
1

answered Sep 20 '14 at 20:53

Siraj

687
4
7

As I wrote to @Crowcoder, I use hide() method only as example. In reality I have much more complex task. – alexpods Sep 22 '14 at 09:32

Get element inside ngClick directive

3 Answers3