Поддержание функциональности директив SVG-шаблонов в AngularJS

Question

Поддержание функциональности директив SVG-шаблонов в AngularJS

0

Я работаю с SVG SVG на SPA.

Я столкнулся с проблемой, не имея возможности отображать элементы SVG в шаблоне директивы. Я считаю, что это потому, что моя директива является внешним элементом внутри пространства имен SVG.

Мне нужна работа, чтобы использовать функциональные возможности моей директивы с элементами SVG. Либо, создав Element-Restricted-Directive, законную внутри тегов SVG, или динамически добавляя мою директиву в качестве Директивы с ограничениями атрибутов к элементу SVG.

В настоящее время я запускаю Angularjs 1, и я использую элементы SVG (т.е. rect, эллипс, g) в моих шаблонах директив.

Я нашел сообщение о переполнении стека, которое говорит о копировании и удалении узла DOM Directive и воссоздании его как узла SVG. Я не уверен, что контроллер все равно будет привязан к новому узлу.

Ссылка: рендеринг шаблонов SVG в директивах AngularJS

Есть ли у вас предложение преодолеть это?

Lightfooted 15 май 2016, в 16:13

Источник

Теги:

html

angularjs

svg

angularjs-directive

1 ответ

Ещё вопросы

Lightfooted · Answer 1 · 2016-05-17T11-09-00.000Z

Используя любую более позднюю версию Angularjs, чем 1.3.0, в объекте определения директивы вы можете объявить templateNamespace как svg. Затем replace на true:

// ...

.directive('myDir', function() {
    return {
        restrict: 'E',
        templateNamespace: 'svg',
        template: '<ellipse rx="100" ry="33" cx="50" cy="50" fill="#00ff00" / >',
        replace: true
    }
});

Это правильно отобразит шаблон. Если ни одно шаблонное имя не объявлено, предполагается html.

В качестве побочного примечания replace амортизируется, но не нарушается.

Документация по этому адресу находится здесь, в разделе "templateNameplace":
https://docs.angularjs.org/api/ng/service/ $ compile