当存在父ng

当存在父ng-click时，防止触发嵌套的ui-sref(Prevent nested ui-sref to be triggered when there is a parent ng-click)

实际上是嵌套ui-sref时Prevent调用parent的反转

我想点击一个具有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重复代码只使用多个元素进行点击，但是如果你有另一个好方法可以做到这一点，请不要犹豫评论！ :)

Pratically the inverse of Prevent calling parent when nested ui-sref

I want to click on a nested element which has a ui-sref, but instead only the parent ng-click should be triggered (conditionally), stopping the propagation to the nested children elements.

That's my code:

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

Right now with this code, when I click on the nested element, both parent ng-click and ui-sref are triggered. Only the parent should be called.

Reason is that I want to avoid the duplication of code with two ng-if with multiple elements just for a click, but if you have another good way to do this, don't hesitate to comment! :)

最满意答案

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

instead of ui-sref, you can use $state.go inside the controller :

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