javascript - svg 和 angularjs - 一个简单的 ngClick 示例

Question

我有一个简单的问题(我希望如此)。我想绑定(bind) svg 元素和 angularjs。这是问题的样子:

<svg> <g ...> <text ... ng-click="count=count+1" ng-init="count=0">Click me!</text></g></svg>

外面<svg>我有以下代码:

count: {{count}}

我想点击“点击我!”看看我点击了多少次。那是行不通的。我看不到结果，我的问题是为什么？这只不过是来自 AngularJs 网页的示例: ngClick example from AngularJs .

当我在不使用/不使用 <svg> 的情况下使用该示例时(假设用按钮 - 就像在官方 AngularJs 网页中一样):

<button ng-click="count = count + 1" ng-init="count=0">
Click me!
</button>

AngularJs 做他的工作。关于 <svg> 是否有任何限制？和 AngularJs？或者我必须使用一些技巧才能使用它？

非常感谢任何提示或帮助!

尼康

Answer 1

Angular 指令在 SVG 中工作得很好。请参阅以下代码，使用您的 ng-click 函数:

count: {{count}}
<svg width="100" height="100">
  <circle ng-click="count=count+1" ng-init="count=0" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

在 plunker 中带有 Angular ng-click 示例的 SVG:http://plnkr.co/edit/KvHKa68oZ6YxQIJzyIXG?p=preview