Question

我定义了这个锚标记：

<a ng-disabled='placeOrderDisabled()' href='@Url.Action("Order","ShoppingCart")?deliveryMethod={{deliveryMethod}}' class="btn btn-primary">
     {{ placeOrderButtonText }} <i class="fa fa-chevron-right"></i>
</a>

在Firefox和Chrome中，锚标记仍然是可点击的，我从其他答案中了解到这是设计的，我需要使用按钮。

请告知我如何重构上述代码以使用按钮元素，因为button元素不能具有href属性。

Answer 1

不要重构您的代码。您仍然可以使用CSS来使用锚标记来实现禁用行为。

a.disabled, a[disabled] {
    pointer-events: none;
}

来自docs：

CSS属性指针 - 事件允许作者控制什么情况（如果有的话）特定的图形元素可以成为鼠标事件的目标。当此属性未指定时，相同 visiblePainted值的特征适用于SVG内容。

请参阅下面的工作示例：

var app = angular.module("sa", []);

a.disabled,
a[disabled] {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div ng-app="sa" ng-init="disableButton = false">

  <a ng-disabled='disableButton' href="" class="btn btn-primary">
     I'm an anchor button <i class="fa fa-chevron-right"></i>
  </a>

  <a href="" ng-click="disableButton = !disableButton">Disable the anchor button</a>
</div>

Answer 2

你可以试试这个：

<button class="btn btn-primary" ng-disabled="placeOrderDisabled()" ng-click="clickFn()">
  <i class="fa fa-chevron-right"></i>
</button>

在JS文件上。我假设@ Url.Action是控制器内的对象函数。

$scope.clickFn = function () {
  var url = $scope.Url.Action('Order','ShoppingCart') + '?deliveryMethod=' + $scope.deliveryMethod;
  window.location.href = url;
}

由于ng-disabled不起作用，将锚标签重构为按钮

2 个答案: