我正在使用 angularjs 1.3.13 版、ui-bootstrap-tpls 0.12 版和 angularjs ui 路由器 0.2.13 版。我想通过使用 ui-sref 显示手风琴内部的模板内容。加载手风琴内部的模板后,不会触发复选框组件的单击事件。对于除按钮以外的所有元素,在以下位置阻止发现事件 对于此问题,我在 angular-ui-router.js 中的 ui-sref 指令的 onclick 绑定事件中添加了一个条件。任何人请告诉我这个解决方案是否正确?
我的代码如下所示。
<accordion>
<accordion-group is-open="true" ui-sref="addContract.add">
<accordion-heading>
Settings <i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': $state.includes('true'), 'glyphicon-chevron-down': !status.open}"></i>
</accordion-heading>
<div ui-view="kpiParamSettings" autoscroll="true"></div>
</accordion-group></accordion>
ui-sref 具有以下 html
<div>
<label><input id="login-remember" name="remember" type="checkbox" value="1">Stop</label>
</div>
element.bind("click", function(e) {
var button = e.which || e.button;
if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
// HACK: This is to allow ng-clicks to be processed before the transition is initiated:
var transition = $timeout(function() {
$state.go(ref.state, params, options);
});
e.preventDefault();
// if the state has no URL, ignore one preventDefault from the <a> directive.
var ignorePreventDefaultCount = isAnchor && !newHref ? 1: 0;
e.preventDefault = function() {
if (ignorePreventDefaultCount-- <= 0)
$timeout.cancel(transition);
};
}
});
在上面的点击事件中,我添加了以下条件
element.bind("click", function(e) {
if(e.target.type!="checkbox") // Condition for avoiding to bind the checkbox click event
{
var button = e.which || e.button;
if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
// HACK: This is to allow ng-clicks to be processed before the transition is initiated:
var transition = $timeout(function() {
$state.go(ref.state, params, options);
});
e.preventDefault();
// if the state has no URL, ignore one preventDefault from the <a> directive.
var ignorePreventDefaultCount = isAnchor && !newHref ? 1: 0;
e.preventDefault = function() {
if (ignorePreventDefaultCount-- <= 0)
$timeout.cancel(transition);
};
}
}
});