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

实用地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和带有多个元素的代码只是为了单击而重复，但是如果您有另一种好方法，请不要犹豫！ :)

最佳答案

代替ui-sref，您可以在控制器内部使用$ state.go：

// 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");
   }
};

关于javascript - 防止在有父级ng-click时触发嵌套ui-sref，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41979820/