重構錨標記按鈕，由於NG-殘疾沒有工作

我已經定義了這種定位的標籤：重構錨標記按鈕，由於NG-殘疾沒有工作

<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，錨標記仍然是可點擊的，雖然，我從其他的答案，這種理解是由設計，我需要使用一個按鈕。

請指教，我需要重構上述代碼以使用按鈕元素，因爲按鈕元素不能具有href屬性。

來源

2016-05-23 Shawn de Wet

你可以試試這個：

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

來源

2016-05-23 04:08:11 mtamma

不要重構你的代碼。您仍然可以使用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>

來源

2016-05-23 04:07:05

試過這個，但按鈕在Chrome和Firefox中仍然可以點擊（即使光標變爲「No Entry」光標。 –

重構錨標記按鈕，由於NG-殘疾沒有工作

回答

相關問題