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

【问题标题】：svg and angularjs - a simple ngClick examplesvg 和 angularjs - 一个简单的 ngClick 示例
【发布时间】：2015-04-25 17:29:28
【问题描述】：

我有一个简单的问题（希望如此）。我想绑定这么说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> 的情况下/在<svg> 之外使用该示例时（假设带有按钮 - 就像在 AngularJs 官方网页中一样）：

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

AngularJs 做他的工作。 <svg> 和 AngularJs 有什么限制吗？还是我必须使用一些技巧才能使用它？

非常感谢您提供任何提示或帮助！

尼康

【问题讨论】：

标签： javascript angularjs svg

【解决方案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 中带有角度 ng-click 的 SVG 示例：http://plnkr.co/edit/KvHKa68oZ6YxQIJzyIXG?p=preview

【讨论】：

【解决方案2】：

请注意，要通过 javascript 访问，加载的 SVG 文件遵循与其他内容相同的规则集。这意味着如果您从不同的域或文件源加载 SVG，Same origin Policy 可能会导致一些问题（这意味着如果您将代码放在 localhost 等服务器上，您的代码可能会开始工作）

要访问/引用 SVG 节点，您可以使用某些 javascript 库，例如 Raphaël.js，尽管您也可以使用直接的 java 脚本

希望对你有帮助

【讨论】：