獲取圖標的父div ID onclick

Question

在單擊“人眼”圖標時，我只想聚焦/突出顯示該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");
      };

我必須在單擊圖標時找到id來代替id="last" ，然后需要添加類。

我嘗試了： $($event.target).parent()但無法獲得結果。

演示： http : //plnkr.co/edit/HvTRdjNVdmHjnyG41O4F?p=preview

請幫忙。

Answer 1

您可以使用this來獲取當前對象，

ng-click="focus(this)"

然后在函數中

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

.closest("div")將獲取父div。 與parent()相比， closest()優勢在於它可以遍歷多個級別。

Answer 2

只需在ng-click方法中傳遞angularjs $event屬性ng-click 。

ng-click="focus($event)" 

使用您的方法。

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

Answer 3

如果您閱讀此線程：

用ng-click自動傳遞$ event？

您將看到zeroflagL的注釋，我剛剛對其進行了評論，您正在嘗試修改控制器中的可視組件，這不是此處理程序的目的。

角度文檔進一步支持它：“控制器應僅包含業務邏輯。 將任何表示邏輯放入Controller中都會極大地影響其可測試性。 ' https://docs.angularjs.org/guide/controller

沒有什么可以阻止您在這里使用普通的舊javascript

我添加了一個腳本塊，該腳本塊應用了一種樣式，而不是直接父樣式，而是一些樣式

這是您改裝的矮人，

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

但本質上是這些補充：

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>