ng-disable 在 SVG 元素中不起作用

Posted 2023-03-28

【中文标题】ng-disable 在 SVG 元素中不起作用

【英文标题】：ng-disable doesn't work within SVG element

【发布时间】：2018-06-15 10:57:51

【问题描述】：

我正在研究一个 angularjs 指令，其中一旦单击一次圆形元素就需要禁用它。 ng-click 事件按预期工作，但 ng-disable 不起作用。我可以看到在html中添加了禁用的类，但是点击事件仍然被触发。

有什么想法吗？

<svg  >
      <circle ng-disabled="disableme" ng-click="clickme()" ng-init="count=0" cx="50" cy="50" r="40" stroke="green" stroke- fill="yellow" />
    </svg>

app.controller('MainCtrl', function($scope) 
  $scope.name = 'World';
  $scope.clickme = function () 
    $scope.count=$scope.count+1;
    $scope.disableme = true;
  ;

http://plnkr.co/edit/dK07QfKoA9qOrNsdlypE?p=preview

【参考方案1】：

ng-disabled 不适用于 svg。或者，您可以使用ng-class 来完成此操作

.disable 
     pointer-events: none;
     opacity: 0.5; 
 

将ng-class 添加到svg 元素

 <svg    ng-class="'disable': disableme">
      <circle ng-click="clickme()" ng-init="count=0" cx="50" cy="50" r="40" stroke="green" stroke- fill="yellow" />
    </svg>

Demo