get parent div id onclick of icon

Question

On click of fa-eye icon I want to focus/highlight only that div.

Html:

<i style="float: right; margin: 8px; cursor: pointer;" class="fa fa-eye" ng-click="focus()"></i>

JS:

$scope.focus = function($element) {
        $('#focus-overlay').toggleClass("focus-overlay");
        $('#last').toggleClass("widget-focus-enabled");
      };

In place of id="last" I have to find the id on click of icon and then need to add class..

I tried : $($event.target).parent() but not able to get the result.

Demo : http://plnkr.co/edit/HvTRdjNVdmHjnyG41O4F?p=preview

Please help.

score 2 · Answer 1 · answered Dec 10 '15 at 07:10

2

You can use this for getting the current object,

ng-click="focus(this)"

Then in the function,

$scope.focus = function($element) {
        var parent= $($element).closest("div");
        $('#focus-overlay').toggleClass("focus-overlay");
        $('#last').toggleClass("widget-focus-enabled");
      };

.closest("div") will get the parent div. Advantage of closest() over parent() is it can traverse multiple level.

answered Dec 10 '15 at 07:10

Anoop Joshi P

25,373
8
32
53

this will not give you current element it will give the scope of the element – ngLover Dec 10 '15 at 07:41
I dont want closest() I want parent().parent() Is it correct if i will do.. $($element.target).parent().closest("div"); – Javascript Coder Dec 10 '15 at 08:33
@ngLover 'this will not give you current element' ? what do you meant by that? – Anoop Joshi P Dec 10 '15 at 08:51
using this keyword, you can not get the element in the focus method – ngLover Dec 10 '15 at 08:52
which element you are mentioning about? this will be 'fa-eye' element in this context – Anoop Joshi P Dec 10 '15 at 08:54
Oh i see you have not passed $element in link method, ok will work then – ngLover Dec 10 '15 at 08:59

score 1 · Accepted Answer · answered Dec 10 '15 at 07:45

1

Just pass $event property of angularjs in ng-click method.

ng-click="focus($event)"

In your method do so.

    $scope.focus = function($element) {
        var parent= $($element.target).closest("div");
        $('#focus-overlay').toggleClass("focus-overlay");
        $('#last').toggleClass("widget-focus-enabled");
      };

answered Dec 10 '15 at 07:45

ngLover

4,439
3
20
42

I am doing .. var parent= $($element.target).parent().parent().parent().parent().parent(); then I am getting the result is it correct practise ? – Javascript Coder Dec 10 '15 at 08:43
i think you should pass a id into the directive wherever you are using directive and using that you can collapse the div. it would be better solution – ngLover Dec 10 '15 at 08:50
I don't have id reference.. that's why I am finding on click.. any other solution. – Javascript Coder Dec 10 '15 at 08:53

score 1 · Answer 3 · edited May 23 '17 at 11:52

if you read this thread:

Automatically pass $event with ng-click?

you will see the comment by zeroflagL, which i just upvoted, you are trying to modify a visual component in a controller, which is not what is the intention of this handler

it is further supported by the angular documentation: 'Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. ' https://docs.angularjs.org/guide/controller

there is nothing stopping you from using plain old javascript here

i have added a script block that applies a style, not to the direct parent but a few up

here is your modified plunker,

http://plnkr.co/edit/0x4ZqKoQcQLHXMMWtLJD

but in essence here are the additions:

index.html:

<script>
var _handleclick = function(ele) {
ele.parentElement.parentElement.parentElement.style.backgroundColor = 'red';
}
</script>

template.html:

<i style="float: right; margin: 8px; cursor: pointer;" class="fa fa-eye" onclick="_handleclick(this)" ng-click="focus()"></i>

get parent div id onclick of icon

3 Answers3