javascript - 当有父级 ng-click 时，防止触发嵌套的 ui-sref

Question

实际上是 Prevent calling parent when nested ui-sref 的倒数

我想单击具有 ui-sref 的嵌套元素，但只有父级 ng-click 应该被触发(有条件地)，从而停止向嵌套子元素的传播。

这是我的代码:

// Template:
<div ng-click="canClick && openAnotherLink($event)">
    <a ui-sref="myState">
        I wanna click here to trigger the parent ng-click. 
        Overriding the default ui-sref behavior
    </a>
</div>

// Controller:
$scope.canClick = true;

$scope.openAnotherLink = ($event) => {
    $event.stopPropagation(); // <-- this does not works
    // $event.preventDefault() // <-- I tried even this, not working
    window.open('http://google.com', '_blank');
    return;
}

现在使用此代码，当我单击嵌套元素时，父级 ng-click 和 ui-sref 都会被触发。仅应调用父级。

原因是我想避免仅仅为了一次点击而使用两个具有多个元素的 ng-if 重复代码，但如果您有其他好的方法来做到这一点，请不要犹豫发表评论! :)

Answer 1

您可以在 Controller 内使用 $state.go 而不是 ui-sref :

// Template:
<div ng-click="canClick && openAnotherLink()">
    <a ng-click="goToState($event)">
        I wanna click here to trigger the parent ng-click. 
        Overriding the default ui-sref behavior
    </a>
</div>

// Controller: I assume you injected the "$state" provider
$scope.canClick = true;

$scope.openAnotherLink = () => {
    window.open('http://google.com', '_blank');
}

$scope.goToState = function goToState(e) {
   if (!$scope.canClick) {
      e.stopPropagation();
      $state.go("myState");
   }
};