嵌套 ui-sref 时防止调用父级 [英] Prevent calling parent when nested ui-sref
问题描述
假设我有嵌套的 DOM，并且每个 DOM 都有不同的 angular-ui-router 状态的 ui-sref.我想点击外部只提醒外部，点击内部只提醒内部.目前，如果我点击 inner，它会同时提醒外部和内部状态.
Let say I have nested DOMs and each has ui-sref for different angular-ui-router state. I want to click outer to only alert outer and click inner to only alert inner. Currently if I click inner, it will alert both outer and inner state.
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
<script data-require="ui-router@0.2.8" data-semver="0.2.8" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<a ui-sref="outer" style="width:300px;height:300px;background:yellow;">
Outer
<span ui-sref="inner" style="width:100px;height:100px;background:red;">Inner</span>
</a>
</body>
</html>
Javascript:
var app = angular.module('plunker', ['ui.router']);
'use strict';
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state("outer", {
url: "/outer",
resolve: {
test: function() {
alert("Triggered state outer");
return true;
}
}
})
.state("inner", {
url: "/inner",
resolve: {
test: function() {
alert("Triggered state inner");
return true;
}
}
});
}]);
app.controller('MainCtrl', function($scope) {
});
链接:http://plnkr.co/edit/yzgUAA3lLwkF9svzczl3?p=preview
问题:
如何防止内部触发外部状态?
How to prevent inner to trigger outer state?
我是否应该为内部 DOM 实现某种 stopImmediatePropagation 以便它不会触发父 DOM 的 ui-sref?
Should I implement some kind of stopImmediatePropagation for the inner DOM so it won't trigger the parent DOM's ui-sref?
有其他选择吗?也许手动使用 $state.go ?
Are there alternatives? Maybe using $state.go manually?
更新 1:
由于要求，我无法更改 HTML.这只是一个简化版本，因为在我的代码中，外部元素非常大，包含其他元素.
I cannot change HTML due to requirement. This is just a simplified version because in my code, the outer element is very large containing other elements.
推荐答案
这个有效
<a ui-sref="outer" style="width:300px;height:300px;background:yellow;">
Outer
<span ui-sref="inner" style="width:100px;height:100px;background:red;" ng-click="$event.stopPropagation()">Inner</span>
</a>
我不知道您可以在与 ui-sref
这篇关于嵌套 ui-sref 时防止调用父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
