ng-disable не работает в элементе SVG

Question

Я работаю над директивой angularjs, в которой элемент круга необходимо отключить, если на него щелкнуть один раз. Событие ng-click работает как положено, но ng-disable не работает. Я вижу, что отключенный класс добавляется в HTML, но событие щелчка по-прежнему срабатывает.

Какие-нибудь мысли?

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

демонстрация