代码之家 › 专栏 › 技术社区 › vale007

ng disable在SVG元素中不起作用

angularjs-ng-disabled angularjs-directive svg angularjs

-1

vale007 · 技术社区 · 6 年前

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

有什么想法吗?

<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

1 回复 | 直到 6 年前

-1

Sachila Ranawaka 6 年前

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

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

添加 ng类 到 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

推荐文章

SK-USA · 无法从ng下拉菜单multiselect指令调用控制器函数

6 年前

Junaid Farooq · 无法使用AngularJs在数字“1”上创建属性“subjects”

6 年前

Neel · 如何在事件广播的超时延迟内停止间隔?

6 年前

BlockchainProgrammer · AngularJS将数据从控制器读取到表

6 年前

mBo · 跟踪窗口上的元素宽度调整角度JS

6 年前

Devin Fields · 有条件删除其他指令的指令

6 年前

Scrumptious · 未知提供程序:serviceProvider->service->myDirective

6 年前

NeverGiveUp161 · AngularJS:ngMessages无法使用select中的ng选项

6 年前

dragonfly · 仅当存在内容时显示弹出窗口

6 年前

NeverGiveUp161 · AngularJs将模型值+模型名称传递给控制器中的函数

6 年前