防止在嵌套ui-sref时调用父级
防止在嵌套ui-sref时调用父级
提问于 2014-03-05 14:12:03
假设我有嵌套的DOM，每个DOM都有对应于不同angular-ui-router状态的ui-sref。我想单击以仅警告外部，并单击 inner 以仅警告内部。目前，如果我点击 inner ，它将同时警告外部和内部状态。
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
问题
如何防止内部触发外部state?
- Should我为内部DOM实现了某种类型的
stopImmediatePropagation，这样它就不会触发父DOM的DOM了？也许可以手动使用$state.go？
更新1:
由于要求，我无法更改HTML。这只是一个简化的版本，因为在我的代码中，外部元素非常大，包含其他元素。
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-03-08 13:22:43
这是可行的
<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相同的元素中添加ng-click="$event.stopPropagation()"
Stack Overflow用户
发布于 2014-03-14 14:14:08
用这个..。
<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>Stack Overflow用户
发布于 2017-04-11 16:32:31
出于一个完全不同的目的，我有一个stopEvent指令等待用于嵌套的ui-sref目的。
<a ui-sref="outer">
Outer
<span ui-sref="inner" stop-event>Inner</span>
</a>这是指令
app.directive('stopEvent', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
element.bind('click', function (e) {
e.stopPropagation();
});
}
};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22189985
复制相关文章
相似问题