ng-bind with the ability to store its own internal value

My server side code (GSP) is dynamically generating HTML for me in the following format:

<span>
    <g:generateAmount />
</span>

I am integrating this into an Angular controller and I want to be able to bind a scope variable to the span:

<span ng-bind="subtotal">
    <g:generateAmount />
</span>

The issue I am facing is that after binding, the inner text disappears because the subtotal value is not set in the controller during initialization (although updating it from the controller works fine). The ng-model also does not seem to read it.

Query

Is there a way to bind to a node while preserving the data inside that node? For example, in the scenario above, $scope.subtotal would hold the output of <g:generateAmount />. This way, I could modify the subtotal from the controller and see those changes reflected.

View example: http://jsfiddle.net/robcampo/zg6GE/2/

javascriptangularjs

Answer №1

To extract a value from the DOM before using $compile, you can create a custom directive.

Another option is to modify your HTML content by inserting <g:generateAmount /> within the ng-init attribute, like this:


<div ng-controller="MyCtrl" ng-init="subtotal=<g:generateAmount>">
    <span ng-bind="subtotal" />
</div>

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

How can the Header of a get-request for an npm module be modified?

Currently, I am utilizing an npm module to perform an API request: const api_req = require('my-npm-module-that-makes-an-api-request'); However, I am seeking a way to modify the user-agent used for requests generated internally by the npm module ...

javascriptnpmgethttp-headersspoofing

Issue: Module 'blog' not found in the specified path in my Node.js application

this snippet showcases my code in routes/blog.js var express = require('express'); var router = express.Router(); const Blogs = require("../models/blog"); and here is the code from models/blog.js const mongoose = require('mongoose ...

javascriptnode.js

Cast the variable to access nested data

I'm currently working with data retrieved from an API call in the form of nested objects. My goal is to extract and organize this information for display in a table. In my code, I am using a loop with for (const [key, value] of Object.entries(result)) ...

javascriptreactjstypescriptjavascript-objects

Developing Java-based Ajax scripts

Is there a way to implement AJAX functionality in Java without actually using AJAX itself? I'm searching for a JAVA API that can achieve this. Just like we can submit data from a web page using a JAVA program, I want to handle AJAX operations through ...

javajavascriptajaxgwtpostdata

I'm searching for the Jasmine framework function definitions specifically for Protractor. Where can I find them?

Are resources available for obtaining support documents or guidelines in order to create a custom framework similar to Jasmine for Protractor? ...

angularjsjasmineprotractor

Mobile Drag and Drop with JavaScript

While experimenting with a user interface I created, I utilized jQuery UI's draggable, droppable, and sortable features. However, I observed that the drag and drop functionality does not work in mobile browsers. It seems like events are triggered diff ...

javascriptjqueryandroid

Manipulate objects in three.js to always face the mouse pointer

It seems that despite my efforts, I am struggling with this task as I am relatively new to it. Surprisingly, I am not getting any errors in Dreamweaver. I've started fresh by integrating the look at function with the OBJ loader, camera, and lights in ...

javascriptthree.js

Discover an Easy Way to Scroll to the Bottom of Modal Content with Bootstrap 5 on Your Razor Page

Currently, I am developing a web application that utilizes Razor Pages and Bootstrap 5 modals to showcase dynamic content. The challenge I am facing is ensuring that the content inside the modal automatically scrolls to the bottom when the modal opens or w ...

javascripthtmlbootstrap-5razor-pages

Integrating a <script></script> tag into the content method of fancybox2: A step-by-step guide

Currently, I am attempting to include a JavaScript content within the content method of fancybox. <script> $('#streaminput').on("click", function() { $('#streaminput').fancybox({ width : '95%', height ...

javascriptjqueryajaxfancybox-2

Update the variable obtained from the user input and insert it into a new container depending on the input value

In reference to my previous inquiries, I refrain from adding more details to avoid confusion since it already received numerous responses. While I can successfully retrieve input from a text field with the ID 'test' and display it in the 'r ...

javascripthtml

Guide on retrieving a file through an HTTP request with restricted cross-origin access restrictions

Having some issues with downloading files from specific links, such as . My goal is to automate the download process for these redirected files. The challenge I'm facing is that trying to access the link directly through a web browser just gives me a ...

javascripthtmlhttphttprequestuserscripts

Does the Mirage addon work effectively in the ember.js tutorial?

Following the ember.js tutorial, I'm facing a roadblock at this particular stage: (especially when implementing the Mirage add-on). I've made changes to the mirage/config.js file as advised but still unable to display the Mirage data. Despite ...

javascriptnode.jsember.js

Top Method for Reloading Element-Specific JavaScript When Replacing Elements

Is there a better way to re-initialize JavaScript without needing a page refresh? I'm currently struggling with appending an MDBootstrap <select> tag, which involves more than just adding a child element. Instead, I have to remove the element an ...

javascriptphphtmljquery

ReactJS with Redux Form and Material UI framework featuring automatic typing and field clearing capabilities

Currently, I am in the process of developing a nested form framework that utilizes both the redux form and material ui frameworks. The components are already built up to this point - you can view them here: https://codesandbox.io/s/heuristic-hopper-lzekw ...

javascriptreactjsmaterial-uiredux-form

"Utilizing long-polling techniques for cross-subdomain AJAX requests

Currently, I am developing a notifications script that continuously checks a database for any updates and displays them in a custom JavaScript popup. I have successfully implemented the jQuery AJAX loading and processing script as well as the PHP long pol ...

phpjavascriptjqueryajaxlong-polling

Failed to execute npm script for server side rendering (ssr)

I experimented with Server-Side Rendering (SSR) in my React application for SEO benefits. Although I encountered certain errors, they were not considered actual errors by React. Initially, the error appeared in componenDidMount=()=> Upon commenting ou ...

javascriptreactjsbabeljsseoserver-side-rendering

Angular2 - Implementing Form Validation for Dynamically Generated Input Fields Based on Conditions

My goal is to create a basic form that allows users to select between two options: Local and Foreigner. If the user does not make a selection, the form should be marked as invalid. Choosing Local will make the form valid, while selecting Foreigner will rev ...

javascriptangularjsformsvalidationangular

Blur the AngularJS button after it is clicked

Currently, I am utilizing AngularJS within a Salesforce setup. One of the functionalities involves a button that triggers several automations in Salesforce upon being clicked, which works perfectly fine. However, the automation process takes approximately ...

angularjssalesforce

Configuring Angular alias routes without redirection

I must be overlooking something simple, but I want to create aliases for my routes. My goal is to have the route /hello_world redirect to the existing route of /posttemplate. I aim to alias my routes in order to provide users with an easy-to-remember way ...

angularjsroute-provider

Should I use Mongoose schema methods or prototype functions?

I am curious about the functionality of functions and ES6 classes in relation to new objects created from a mongoose schema. I wonder if the functions are duplicated for each new object and what the best approach is when utilizing ES6 classes. To illustrat ...

javascriptnode.jsmongoose-schema