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

而不是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");
   }
};

当存在父ng-click时，防止嵌套的ui-sref被触发

1 个答案: