ng样式禁用指标事件

Question

我正在尝试通过使用禁用a-href

var style ={};
style.zIndex = '10';
style.background = 'rgba(192,192,192,0.3)';
style.height= '100%';
style.top= '0';
style.left= '0';
style.right= '0';
style.pointerEvents = 'none';
return style;

在控制器端。

HTML方面：

<a href="#/tab/cases/case-detail/{{case.itemDetails.ID}}">
    <div style="width:80%; float:left;">
<table ng-init="sloppy = case" ng-style="calculateStyle(sloppy)">
    <tr>
        <td><strong>Item Code: </strong></td>
        <td style="padding:3px">{{case.itemDetails.itemCode}}</td>
    </tr>   
    </table>

</div>
</a>

当前，叠加层有效，但指针事件不起作用。

我正在使用angular-js ng样式执行此操作。 我做错了还是使用了错误的方法？ 还有其他禁用a-href的方法吗？

Answer 1

您需要将ng-style添加到锚标记中，并确保您的样式具有范围。

HTML：

<a href="{{myLink}}" ng-style="style">Link to Disable</a>

控制器：

 .controller('myCtrl', function ($scope) {
    $scope.myLink = 'http://google.com';
    $scope.style = {};

    $scope.disableLink = function () {
      $scope.myLink = '#';
      $scope.style = {
         zIndex: '10',
         background: 'rgba(192,192,192,0.3)',
         height: '100%',
         top: '0',
         left :'0',
         right : '0',
         pointerEvents : 'none'
      }
    };

    $scope.disableLink();  //call this to disable
  });

Answer 2

ng-style属性必须位于a元素上才能禁用，而不是位于table元素上。

这是一个工作的小提琴： http : //jsfiddle.net/6vypnv9r/

HTML：

<div ng-app="app">
    <div ng-controller="myCtrl">
        <a href="#" onclick="alert('1')" ng-style="style">click</a>
    </div>
</div>

JS：

angular.module('app',[]).controller('myCtrl',['$scope',function($scope){
    $scope.style ={};
    $scope.style.zIndex = '10';
    $scope.style.background = 'rgba(192,192,192,0.3)';
    $scope.style.height= '100%';
    $scope.style.top= '0';
    $scope.style.left= '0';
    $scope.style.right= '0';
    $scope.style.pointerEvents = 'none';
}]);