單擊元素的子元素時更改狀態（+ AngularJS）

Question

目標

單擊元素（ <li> ）的子項（ <i> ）時更改狀態

問題

當我點擊<i> ，沒有任何反應，那是<li>孩子。

細節

我正在使用AngularJS和ng-click 。 看到：

<li ng-click="openNavigator($event)">
    <i class="ico ico-home"></i>
</li>

更新

伙計們，你是對的 - 它正在發揮作用！ 實際上，問題還有一點。

看到這個jsFiddle 。 如果您完全單擊該按鈕，控制台將向您返回特定結果; 否則，如果您完全單擊該圖標，則會從$event.target獲得另一個響應。

這種行為對我不利 - 它很脆弱。 在我的實際應用程序中， 我需要與父母，兄弟姐妹等一起工作，並且這種不確定性會導致預期，但不需要的結果。

你們都能看到我的問題嗎？ 如果是這樣，想法？

提前致謝！

Answer 1

HTML

<div ng-app='currentApp' ng-controller='ACtrl'>
    <li class="btn btn-primary">
        <i class="fa fa-phone" ng-click="openNavigator($event)"></i>
    </li>
</div>

CONTROLLER

currentApp.controller('ACtrl', ['$scope', function ($scope, $event) {
    $scope.openNavigator = function($event) {
        var target = $event.target['parentElement' || 'patentNode'];
        console.log('li parent', target);
    }
}]);

由於i標簽是li的子節點並且click事件不一致，所以我建議你在點擊時定位i標簽，然后抓住父節點。 你可以說它是冒泡的，這是正確的，所以要修復它以i為目標並且它不會冒出來。

這是一個問題的主要原因是因為AngularJS沒有像jQuery那樣的事件委托功能，所以你不能專門針對li標簽。

小提琴也得到了更新！

的jsfiddle

Answer 2

它應該工作。 這是一個掠奪者