2015-12-10 3 views
1

При щелчке значка fa-eye я хочу сфокусировать/выделить только этот div.получить родительский div id onclick значка

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="last" я должен найти идентификатор на щелчку значка, а затем нужно добавить класс ..

Я попытался : $($event.target).parent(), но не смог получить результат.

Демо: http://plnkr.co/edit/HvTRdjNVdmHjnyG41O4F?p=preview

Пожалуйста, помогите.

ответ

1

Просто отправьте $event объект angularjs в 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"); 
     }; 
+0

Я делаю .. var parent = $ ($ element.target) .parent() .parent() родитель() родитель() родитель()...; то я получаю результат, это правильная практика? –

+0

PLease проверить демо .. и предложить, если я могу что-то улучшить .. –

+0

Я думаю, вы должны передать идентификатор в директиве, где бы вы ни использовали директиву, и используя это, вы можете свернуть div. было бы лучше решение – ngLover

2

Вы можете использовать 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. Преимущество closest() над parent() это может пройти несколько уровней.

+0

это не даст вам текущий элемент, это даст объем элемента – ngLover

+0

Я не хочу ближе() Я хочу, чтобы родитель() родитель() Правильно ли, если я сделаю .. $ ($ element.target) .parent(). Closeest ("div"); –

+0

@ngLover 'это не даст вам текущий элемент'? что вы имели в виду? –

1

если вы читали эту тему:

Automatically pass $event with ng-click?

вы увидите комментарий по zeroflagL, что я просто upvoted, вы пытаетесь изменить визуальный компонент в контроллере, что не является целью этого обработчика

также поддерживается угловой документацией: 'Контроллер s должна содержать только бизнес-логику. Помещение любой логики представления в контроллеры значительно влияет на ее тестируемость. ' https://docs.angularjs.org/guide/controller

есть ничто не мешает вам использовать обычный старый JavaScript здесь

я добавил блок скрипта, который применяет стиль, а не к прямым родителям, но некоторые из них до

вот ваши модифицированный plunker,

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

но по существу здесь дополнения:

индекс.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>