svg和angularjs-一个简单的ngClick示例 [英] svg and angularjs - a simple ngClick example

问题描述

我有一个简单的问题(希望如此).我想绑定这样说svg元素和angularjs.这里的问题看起来是这样的:

I have a simple problem (I hope). I would like to bind so to say svg element and angularjs. Here how the problem looks like:

< svg>< g ...>< text ... ng-click ="count = count + 1" ng-init ="count = 0">点击我！</text></g></svg>

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

计数:{{count}}

我想点击点击我！"并查看我获得了多少点击.那行不通.我没有结果，我的问题是为什么?AngularJs网页上的示例仅此而已:AngularJs中的 ngClick示例.

I would like to clik on "Click me!" and see how many clicks did I make. That does not work. I see no result, my question is why? This is nothing more then the example from the AngularJs webpage: ngClick example from AngularJs.

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

When I use that example without/outside <svg> (let say with button - like it is in official AngularJs webpage):

<按钮ng-click ="count = count + 1" ng-init ="count = 0">点击我！</button>

AngularJs从事他的工作.关于< svg> 和AngularJs是否有任何限制?还是我必须使用一些技巧才能使用它?

The AngularJs does his work. Are there any restrictions regarding <svg> and AngularJs? or perhaps I have to use some trick to use it?

在此先感谢您的提示或帮助！

Great thanks in advance for any tip or help!

尼康

推荐答案

Angular指令在SVG内部可以正常工作.使用ng-click函数，请参见以下代码:

Angular directives will work just fine inside of SVG. See the below code, using your ng-click function:

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中具有角度ng-click示例的SVG: http://plnkr.co/edit/KvHKa68oZ6YxQIJzyIXG?p =预览

SVG with angular ng-click example in plunker: http://plnkr.co/edit/KvHKa68oZ6YxQIJzyIXG?p=preview

这篇关于svg和angularjs-一个简单的ngClick示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！