нг-стиль отключить pointerEvents

Question

Я пытаюсь отключить-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> 

В настоящее время наложения работает, но события указатель не работает.

Im использование углового-js ng-стиля для этого. Я делаю это неправильно или использовал неправильный метод? Есть ли другой способ отключить a-href?

Answer 1

атрибут нг-стиль должен быть на 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> 

ЯШИ:

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'; 
}]); 

Answer 2

Вам нужно добавить свой ng-стиль в свой якорный тег и убедиться, что ваш стиль имеет область действия.

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