svg и angularjs - простой пример ngClick

Question

У меня есть простая проблема (надеюсь). Я хотел бы привязать так сказать svg element и 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? или, возможно, мне нужно использовать какой-то трюк, чтобы использовать его?

Большое спасибо за любой отзыв или помощь!

nykon

Answer 1

Угловые директивы будет прекрасно работать внутри SVG. Смотрите ниже код, с помощью функции нг-клик:

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> 

SVG с угловой нг щелкните пример plunker: http://plnkr.co/edit/KvHKa68oZ6YxQIJzyIXG?p=preview

Answer 2

Обратите внимание, что, чтобы получить доступ JavaScript, загруженные файлы SVG следуют тот же набор правил в качестве другого содержимого. это означает, что же политика происхождение может вызвать некоторые проблемы, если вы загрузите SVG из другого домена или исходного файла (это означает, что ваш код может начать работать, если вы поставите его на сервере, как локальный хост)

Для доступа/эталонного SVG узлов вы можете использовать некоторые JavaScript библиотеки как Raphaël.js, хотя вы можете использовать прямой Javascript, а

надеюсь, что это помогает