如何禁用AngularJS链接?

前端之家收集整理的这篇文章主要介绍了如何禁用AngularJS链接?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的代码如下所示:
  1. <a ng-disabled="!access.authenticated"
  2. data-ng-class="{ 'current': $state.includes('home'),'disabled': !access.authenticated } "
  3. href="/home/overview"
  4. title="Home">
  5. <i class="fa fa-home fa-fw"></i>
  6. </a>

我想这样做,以便当access.authenticated为false时,无法单击该链接.我想到的是将链接更改为按钮,然后将其设置为链接样式.但是这不起作用,因为按钮不会导致页面URL更改.

  1. <button ng-disabled="!access.authenticated"
  2. data-ng-class="{ 'current': $state.includes('home'),'disabled': !access.authenticated } "
  3. href="/home/overview"
  4. title="Home">
  5. <i class="fa fa-home fa-fw"></i>
  6. </button>

有人能告诉我如何做我需要的东西吗?

这是一个简单的指令,它拦截click事件并阻止基于范围变量的页面转换:
  1. module.directive('myLink',function() {
  2. return {
  3. restrict: 'A',scope: {
  4. enabled: '=myLink'
  5. },link: function(scope,element,attrs) {
  6. element.bind('click',function(event) {
  7. if(!scope.enabled) {
  8. event.preventDefault();
  9. }
  10. });
  11. }
  12. };
  13. });

你可以像这样使用它:

  1. <a my-link="linkEnabled" data-ng-class="{'disabled': !linkEnabled}" href="/home/overview">
  2. <i class="fa fa-home fa-fw">Link</i>
  3. </a>

Here is a demo

猜你在找的Angularjs相关文章