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

Question

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

有什么想法吗？

<svg width="100" height="100">
      <circle ng-disabled="disableme" ng-click="clickme()" ng-init="count=0" cx="50" cy="50" r="40" stroke="green" stroke-width="4" 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

Answer 1

ng-disabled 不适用于 svg。或者，您可以使用 ng-class

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

将 ng-class 添加到 svg 元素

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

Demo

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

ng-disable doesn't work within SVG element

angularjs

svg

angularjs-directive

angularjs-ng-disabled