如何禁用AngularJS链接？

发布时间：2020-12-17 07:50:46 所属栏目：安全来源：网络整理

导读：我的代码如下所示： 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.a

我的代码如下所示：

<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更改.

<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>

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

这是一个简单的指令,它拦截click事件并阻止基于范围变量的页面转换：

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>

Here is a demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!