Отключить ng-click от внешнего элемента по ссылке внутри

Question

У меня есть сайт с использованием ui-router, где у меня есть таблица, и у меня есть ng-click на ячейках, но есть ссылка внутри ячейки. Мне нужно отключить ng-click из ячейки, когда нажимается ссылка.

<div ng-click="click()" style="background: #d3d3d3"> 
    <a ui-sref="about">go to about page</a> 
</div> 

Когда я нажимаю эту ссылку, я хочу, чтобы она переходила на страницу about, но не вызывала функцию щелчка. Вот plnkr: http://plnkr.co/edit/kE9CZYcYu1OPA9S0K3Jk?p=preview

Это немного отличается от моего фактического сайта, но это имеет такое же поведение (div вместо таблицы). Я попытался добавить ng-click="$event.preventDefault()", но это тоже не решило.

Любая помощь приветствуется. Благодаря!

Answer 1

Предотвращение распространения события на <a> тег кипящим в DIV

<a ui-sref="about" ng-click="$event.stopPropagation()">go to about page</a> 

Другой способ проверить цель щелчка внутри обработчика щелчка

<div ng-click="click($event)"> 

JS

$scope.click = function(e){ 
    if(e.target.tagName ==='A'){ 
     return; // skip click event handler 
    } 
    // rest of click code 
} 

Answer 2

Вы должны попробовать $event.stopProgation()

<div ng-click="click();" style="background: #d3d3d3"> 
    <a ui-sref="about" ng-click="$event.stopProgation()">go to about page</a> 
</div> 

, которые не будут распространяться события туда родителей.