Is it possible to make SVG Text editable within Angular?

Since version 1.3.1, AngularJS has improved significantly when it comes to writing SVGs. Typically, the interaction involves data being retrieved from a database or form and Angular then populating the nodes in the SVG. However, I am now looking to bypass the need for a separate form to interact with the data and instead directly change the value of a variable by clicking on the text element within the SVG where it is displayed. I attempted using contenteditable directly on the Text node, but unfortunately, that approach did not yield the desired results. Is there a way to make this possible?

javascriptangularjssvgangularjs-directivecontenteditable

Answer №1

Check out this directive I created: http://jsfiddle.net/michaschwab/68dtgcu3/1/ Instead of using 

<text x="20" y="70" fill="red">{{foo}}</text>
, try incorporating these extra tags:

<text x="20" y="70" fill="red" ng-model="foo" content-editable>{{foo}}</text>

This will automatically insert a contentEditable div above your Text node, invisible to the eye. Editing this new div will allow direct manipulation of the model. However, there are some minor issues to note:

  1. The style of the text node may not be entirely replicated in the extra div, potentially making it visible. Additionally, adjustments would need to be made for window resizing and similar events.
  2. There are still some unresolved $sce bugs that require attention. You can refer to this link for more information on addressing this issue.

I hope this solution proves helpful!

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

JavaScript clear when dynamically loading

I am encountering an issue with a javascript plugin I have for a specialized image scroller. This scroller includes various timeout methods and numerous variables with values set based on those timeouts. While everything is working flawlessly, the site I ...

javascripthtmljquerysettimeout

When provided with no input, the function will output true

I'm having trouble understanding this problem! I've implemented a basic jQuery validation that checks if an input field is empty when a button is clicked. http://fiddle.jshell.net/fyxP8/3/ I'm confused as to why the input field still retu ...

javascriptjqueryhtmlinput

Accessing a Parent Object's Method Within a ForEach Loop

While this question leans towards a JavaScript issue rather than Angular, the context remains within Angular. The problem arises when attempting to call the doSomething method from lodash's ._forEach, which creates its own scope causing an inability t ...

javascriptangularjsservice

Creating various containers in React JS for different components

I am faced with the task of rendering multiple DOM elements from my JavaScript code. Imagine I have div elements like this: <div id="div1"><div> //Some Html tags <div id="div2"><div> //Some Html tags <div id="div3" ...

javascriptdomreactjs

Implementing Pagination for JSON-list items in AngularJS

On my webpage, I have a large list of Json data that is organized with paging. The issue arises when selecting categories from the listbox as the data does not display properly. When "All" is selected, each page shows the correct pageSize(4). However ...

javascriptjsonangularjs

Utilizing razor syntax within JavaScript

I've encountered an issue with the code snippet below. I am trying to check if any content exists in my model and then use a ternary operator to show or hide based on its existence. $(document).ready(function() { (@Model.MyProperties.Any()) ? ...

javascriptjqueryasp.net-mvcrazor

Tips for patiently awaiting the completion of an API's creation and local audio file writing process prior to uploading it to an S3 bucket

I am currently utilizing an API to generate a TextToSpeech audio file on the local filesystem before uploading it to an S3 bucket. The package I am using for this process is called elevenlabs-api. The issue I am facing is that the code fails because it ta ...

javascriptnode.jsexpress

Learn the best practices for integrating the options API with the Composition API in Vue3

Using vue3 and vite2 Below is a simple code snippet. The expected behavior is that when the button is clicked, the reactive 'msg' variable should change. It works as expected in development using Vite, but after building for production (Vi ...

javascriptvue.jsvuejs3

invoking a JavaScript function within an if statement

i'm working with two javascript functions 1. function ValidateGVEducation() { var grid = document.getElementById('<%= gvEducation.ClientID %>'); var ddlQuali, ddlUni, ddlInsti, ddlAreaS, ddlStat; ...

javascriptasp.net

The scroll animation feature was not functioning properly in Next.js, however, it was working flawlessly in create react app

I recently transitioned a small project from Create React App (CRA) to Next.js. Everything is working as expected except for the scroll animations in Next.js, which are not functioning properly. There are no errors thrown; the animations simply do not occ ...

javascriptreactjstypescriptnext.jstailwind-css

Enhance your date with a specific month using MomentJS

I attempted to retrieve only the Saturdays of upcoming months with: var momentDt = moment('2017-03-18').add(1); //or 2 or 3 However, adding 1 results in April 18, 2017, which is a Tuesday. Is there an easier way in moment to achieve this wit ...

javascript

Transform the HTML content into a JSON format file

I'm currently developing an online marketplace and trying to convert all product information like name, price, and description into json format. I have a sample code featuring a selection of products displayed in rows. <div class='cakes'& ...

javascripthtmlcssjsone-commerce

Discovering whether a link has been clicked on in a Gmail email can be done by following these steps

I am currently creating an email for a marketing campaign. In this email, there will be a button for users to "save the date" of the upcoming event. I would like to implement a feature that can detect if the email was opened in Gmail after the button is cl ...

javascriptjqueryhtmlcssgmail

Transmit a document via ajax jquery and retrieve it on the server side with Flask

I am currently working on sending a file using ajax jquery from the front end. HTML <label>Upload File </label> <form method='post' enctype="multipart/form-data"> <input type='file' id='uploade ...

javascripthtmljqueryajaxflask

Tips for Loading an Alternate JavaScript File When the Controller Action Result is Null

My controller action is located in *controller/books_controller.rb* def search_book @found_book = Book.find_by_token(params[:token_no]) # After the book is found, I render the search_book.js.erb file using UJS respond_to do |form ...

javascriptruby-on-railsruby-on-rails-3

What is the best way to load images into dynamically generated divs?

I recently wrote a code snippet that dynamically creates divs based on the number of text files found in a local directory. However, I encountered an issue while trying to add code to append photos to each of these created divs. Unfortunately, the photos ...

javascriptjqueryajax

WebApp specifically designed for iPads that mimics the functionality of a swipe

I am in the process of developing a full-screen web application for an iPad that will showcase a series of images in a slider format. The users should be able to swipe between the images and click on one to view it in detail. Below is an example showcasin ...

javascriptjqueryipad

Tick the checkbox to indicate that I want to insert an image in the adjacent column for the same row

Every time I click on the checkbox, an image should appear in the adjacent column for that specific row. Despite using the addClass() method and targeting the td, the image is appearing in all rows instead of just the selected one. Could somebody help me ...

javascriptjqueryhtmlcssangularjs

Top method for identifying "abandoned words" within text that has been wrapped

Our content and design teams have a specific request to prevent paragraphs from ending with an "orphan word" - a single word on the last line of text that has wrapped onto multiple lines. The designer's proposed solution is to adjust the margins sligh ...

javascripthtmlcssreactjs

What is the best way to ensure that the circle is perfectly centered inside the box?

Currently delving into the world of game programming, I've been struggling with this exercise. I can't seem to figure out why the circle won't stop in the center of the box within the update function. What am I missing? var canvas = documen ...

javascriptgame-physics