AngularJS - ng-disabled 不适用于 Anchor 标签

IT技术 javascript html angularjs
2021-01-23 09:14:33

我正在使用 ng-disabled，我喜欢它。它对我的输入和按钮很有用。对于锚标签不起作用。我该如何解决？

HTML code

<a ng-disabled="addInviteesDisabled()">Add</a>

JS code

  $scope.addInviteesDisabled = function() {
      return $scope.event.status === APP_CONSTANTS.STATUSES.PENDING_APPROVAL;
  };
6个回答

超链接没有禁用属性。你可以这样做：

.disabled {
  cursor: not-allowed;
}

<a ng-click="disabled()" ng-class="{disabled: addInviteesDisabled()}">Add</a>

$scope.disabled = function() {
  if($scope.addInviteesDisabled) { return false;}
}
感谢您的回答@JsIsAwesome。我改变为.disabled { cursor: default; opacity: .5; }
2021-03-17 09:14:33
尽管解决方案有效，但用户可以从控制台删除 cursor:not-enabled css。你觉得呢？你有没有什么想法 ？
2021-03-27 09:14:33
不要忘记 ng-class 中类名周围的引号！;)
2021-04-04 09:14:33
@Donthamsettivbhadrarao +1opacity: .5谢谢。:D
2021-04-07 09:14:33
如果这是一个词，则不必这样做，例如“class-name”就需要这个
2021-04-10 09:14:33

您可以创建一个linkDisabledcss 类，并将其应用于您的锚点：

<style>

.linkDisabled {
  cursor: not-allowed;
  pointer-events: none;
  color: grey;
}

</style>
错误的。光标在那里没有影响，指针事件无
2021-03-14 09:14:33
即使应用了此解决方案，也可以按回车键单击该链接
2021-03-22 09:14:33
自 2016 年 6 月起，该pointer-event规则仅在 ie 11+ 中受支持，因此可能要小心处理此规则。所有其他浏览器都相当安全。来源
2021-04-01 09:14:33

你可以通过 CSS 做到这一点，不需要花哨的指令。只需使用 ng-class 来应用这样的类：

ng类：

ng-class="{disabledLink: disabledFunction()}"

css：

.disabledLink {
    color: #ccc;
    pointer-events:none;

}

完全归功于-

https://css-tricks.com/pointer-events-current-nav/

您不能使用ng-disabled.

表单控件具有禁用属性但锚标记没有禁用属性。

检查为什么 angular 的 ng-disabled 可以与 bootstrap 的 btn 类一起使用？

您可以使用 fieldset 来启用禁用链接。

<input type="checkbox" ng-model="vm.iagree"> I Agree
      <fieldset ng-disabled="!vm.iagree">
               <a class="btn btn-primary grey" href="javascript:void(0)" ng-click="vm.Submit()">Submit</a>
      </fieldset>
其它你可能感兴趣的问题
上一篇如何使用动态密钥访问对象？ 下一篇在 IE8 上访问被拒绝错误