如何禁用AngularJS链接? [英] How can I make my AngularJS link disabled?
本文介绍了如何禁用AngularJS链接?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的代码如下:
<a ng-disabled="!access.authenticated"
data-ng-class="{ 'current': $state.includes('home'), 'disabled': !access.authenticated } "
href="/home/overview"
title="Home">
<i class="fa fa-home fa-fw"></i>
</a>
我想这样做,以便当access.authenticated为false时无法单击链接.我想到的是将链接更改为按钮,然后将其样式化为链接.但是,这不起作用,因为按钮不会导致页面URL更改.
I want to make it so that when access.authenticated is false then the link cannot be clicked. What I thought of was changing the link to a button and then styling it like a link. However this does not work as a button does not cause the page URL to change.
<button ng-disabled="!access.authenticated"
data-ng-class="{ 'current': $state.includes('home'), 'disabled': !access.authenticated } "
href="/home/overview"
title="Home">
<i class="fa fa-home fa-fw"></i>
</button>
有人可以告诉我我该怎么做吗?
Can someone tell me how I can do what I need ?
推荐答案
这是一个简单的指令,它会拦截click事件并阻止基于范围变量的页面转换:
Here is a simple directive which intercepts the click event and prevents the page transition based on a scope variable:
module.directive('myLink', function() {
return {
restrict: 'A',
scope: {
enabled: '=myLink'
},
link: function(scope, element, attrs) {
element.bind('click', function(event) {
if(!scope.enabled) {
event.preventDefault();
}
});
}
};
});
您可以像这样使用它:
<a my-link="linkEnabled" data-ng-class="{'disabled': !linkEnabled}" href="/home/overview">
<i class="fa fa-home fa-fw">Link</i>
</a>
这篇关于如何禁用AngularJS链接?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文