Create a directive for AngularJS that utilizes SVG elements without using the deprecated

I rely heavily on directives for creating and manipulating intricate SVGs. With the deprecation of "replace" in directive factories starting from version 1.3.??, I am facing a dilemma on how to construct a valid SVG without utilizing replace: true in my directives. The structure of my directives is as follows:

angular.module('app', []).directive('myRect', function() {
  return {
    restrict: 'E',
    replace: true,
    templateNamespace: 'svg',
    template: '<rect x="20" y="20" width="100" height="50" fill="blue" />'
  };
})

Take a look at this example Plunk showcasing two SVG directives - one with replace: true and one without.

javascriptangularjssvgangularjs-directive

Answer №1

Consider using attribute matching instead of replacing the tags directly. For example, you can change 

<my-rect-non-replace></my-rect-non-replace>
to 
<g my-rect-non-replace></g>
, resulting in valid SVG code 
<g><rect /></g>

Check out this plnkr for more examples

In cases where the template is more complex, it may be necessary to include closing tags for SVG elements to prevent the code from getting mixed up.

<g>
<line x1="-15" x2="15" y1="-25" y2="-25" ></line> 
<rect fill="white" width="16" height="50" x="-8" y="-25" ></rect>
<line x1="-15" x2="15" y1="25" y2="25" ></line>
</g>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to trigger several setTimeout() functions in succession

I'm struggling to grasp the concept of jQuery promises. To delve into this topic, I have put together the following code snippet inspired by a discussion on StackOverflow. let functions = [ function () { setTimeout(function () { console.log("func ...

javascriptjquerypromise

Unable to locate the tag using .find() function following the use of .attr() method

I am currently utilizing jQuery in conjunction with node-horseman to interact with a specific page. My approach involves referencing the page's data-id attribute, which I then pass to my application to search for the li element containing this attribu ...

javascriptjqueryhtml

Is there a different alternative to @JavascriptInterface in Android WebView?

I understand how to invoke a Java method within JavaScript code using the @JavascriptInterface annotation. However, I am facing an issue when trying to determine which JS method should be called from Android. Currently, I am triggering an Android Dialog ...

javascriptjavaandroidwebview

Make an HTTP request to a different domain using AngularJS

I have been working on creating an API using django-rest-framework. However, I encountered an error when running a virtual web server on localhost and attempting to send a request to the API. XMLHttpRequest cannot load http://127.0.0.1:8000/users?format= ...

angularjsdjangorestrequest

Implementing three identical dropdown menus using jQuery and HTML on a single webpage

It seems like I've tangled myself up in a web of confusion. I'm trying to have three identical dropdowns on a single page, each displaying clocks from different cities (so users can view multiple clocks simultaneously). However, whenever I update ...

javascriptjqueryhtml

Using the index of a v-for loop as the value for v-model

I am facing a challenge in setting the index of a v-for loop to a dynamic v-model. I have tried a method that works, but it is not elegant and results in errors in the console: Here is my template section: <div v-for="(ob, index) in $v.especifications ...

javascriptvue.jsvue-cliv-forv-model

Using TypeOrm QueryBuilder to establish multiple relations with a single table

Thank you for taking the time to read and offer your assistance! I am facing a specific issue with my "Offer" entity where it has multiple relations to "User". The code snippet below illustrates these relationships: @ManyToOne(() => User, (user) => ...

javascriptnode.jstypescriptnestjstypeorm

Is it possible to send the value of an array to a client along with a JavaScript file using a read

I have a server set up with node.js that is using node-mysql to extract data and store it in an array called FRUITS. Now, I am looking for a way to pass this array's value (FRUITS) to the client side JavaScript file that I will be sending using &apos ...

javascriptnode.jsnode-mysqlcfreadstream

Utilizing the "apply" method with JavaScript OOP callbacks for dynamic context management

Encountering an issue while creating a callback in my custom EACH function utilizing Object-Oriented Programming principles. To achieve this, I have developed a JavaScript library that emulates the familiar habits of JQUERY. Experience it in action by ch ...

javascriptjqueryoop

Can you explain how to achieve auto-assigning arrays in JavaScript similar to the PHP feature?

I'm seeking a way to update a JavaScript array automatically, without specifying a key as a number or string. The value should simply take the next available numeric key in the array. In PHP, you can achieve this using: <? myarray = array(); mya ...

phpjavascriptarrays

Ways to display and conceal menu depending on initial view and scrolling

On my website, I have implemented two menus - one to be displayed when the page loads and another to show up when a scroll occurs. You can view my page here. The goal is to have the white part visible when the position is at the top, and switch to the blu ...

javascriptjqueryhtmlcss

Ways to properly close open HTML tags using node.js?

Have you ever encountered a situation where user-entered content from a database or similar source only contains the opening tag without the closing tag? This can disrupt the layout of your website. Is there a way to fix this issue using Node.js on the s ...

javascripthtmlnode.js

Angular Express: PUT request causes nested array object to be stripped

I have been facing an issue while trying to update my MongoDB database with data sent from the client side using Angular. The PUT request contains the required data as confirmed by intercepting it with Postman. {val1: 'Some Val', val2:[{v21: &ap ...

angularjsexpress

What is the best way to resize images while also maintaining their ability to transition on hover?

Having an interesting dilemma here.. I'm trying to utilize this CSS code: .custom-forums { height: auto; width: 100%; border-image-source:transparent url("../images/forums.png") center top no-repeat; } in combination with: .custom-forum ...

javascriptjqueryhtmlcssimage

The issue with the isolated scope in AngularJS directive persists

I've been studying AngularJS and attempted to implement "Directive with Isolated scope", but unfortunately, it's not functioning as expected. Below are the code snippets I have used: HTML: <body ng-app="myApp"> <div ng-init="myProper ...

angularjs

What is the best way to personalize the Window.Confirm() dialog in JavaScript?

var val= confirm("Are you sure to cancel?"); The code snippet above will display a popup with two choices - Ok and Cancel, with Ok being the default choice. Is there a way to make Cancel the default choice instead and switch the positions of the ...

javascriptjqueryjson

Using Vue's forEach method in a computed property

I am currently working on a checkbox filter function that saves the value of clicked checkboxes in an array. However, I am encountering issues with updating the computed data as it is always returning undefined. The structure of the data: Casino { brand_ ...

javascriptvue.jsfilternuxt.jscomputed-properties

Where is the ideal location to store non-component data properties in Vue.js?

Currently, I am in the midst of a Vue.js project where components are predominantly used. However, there are moments when I simply need to incorporate some Vue.js syntax without creating an entire component. Since I am not utilizing the render function as ...

javascriptvuejs2vue-componentvue.js

What is causing the default switch to constantly loop in repetition?

Currently, I am working on a Discord bot using discord.js and utilizing a switch statement. However, I am encountering an issue where the "default:" case keeps repeating itself every time any other case is executed. I have already investigated for cases w ...

javascriptswitch-statementdiscord.js

RxJS emits an array of strings with a one second interval between each emission

Currently, my code is set up to transform an Observable<string[]> into an Observable<string>, emitting the values one second apart from each other. It's like a message ticker on a website. Here's how it works at the moment: const ...

javascriptangulartypescriptrxjs