如何禁用我的 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 ?

推荐答案

这里是一个简单的指令，它拦截点击事件并阻止基于范围变量的页面转换:

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 链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！