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.

Answer 1

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.

Answer 2

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");
      };

Answer 3

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>