A guide to creating a JavaScript function that outputs a script in string form

Currently, I am utilizing angular and seeking to add a script to my directive's template. My goal is to create a function that can take the necessary parameters for the script and return it as a string. This approach would prevent me from having to embed lengthy JavaScript files as strings.

Below is the directive in question:

directive

 function barchart() {
        return {
            restrict: 'EA',
            replace: true,
            template: `
                  <div id="canvas" class ="panel-body container-fluid">
                    <div class ="ui centered grid">
                        <div>
                            <div id="title"></div>
                            <div id="chart"></div>
                        </div>
                    </div>
                  </div>
                `,
            scope: {
                revenues: "=revenues"
            },
            link: function ($scope, $element, $attrs) {
                $scope.$watch('revenues', function (rev) {

                    if (typeof rev != 'undefined') {
                        $element.append(`<script> (render(${rev}))(); </script>`);
                    }
                });
            }
        }
    }

I am striving for something similar to this, but encountering issues.

render (function that should return a script)

function render(params){
   return (function(){
            $('#chart').append('<p> params </p>');
          })();
}

error

rev is not defined

Answer №1

Enclose the render() function within ${ and }

$element.insert(`<script>${render(text)}</script>`);

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

Stack two divs together

It may seem silly, but I just can't get it to work. I'm attempting to enclose two divs with different classes in another div, but my current code is automatically closing the divs. There are multiple sets of divs with classes .panel-heading and ...

How do I create a clean HTML file when using the email editor with TinyMCE?

I was able to develop my own email editor, inspired by this particular example. To enhance user experience, I included a download button at the end of the file so that users can easily retrieve their edited content. The issue I'm facing is that tinym ...

Having trouble uploading images with ng-file-upload and multer?

Currently, I am attempting to implement file uploading using ng-file-upload and multer. Here is a snippet of my code: HTML file <form class="form-inline" ng-submit="startUpload()"> <div class="form-group"> <fieldset> <lab ...

The function forEach is unable to handle the process of uploading multiple images to cloudinary

I'm facing an issue with uploading multiple images to Cloudinary from my Vue2JS front-end. I have successfully created a function that uploads a single image, but I am struggling with uploading multiple images using a forEach loop. upload(evt) { ...

Creating a tooltip for new list items: A step-by-step guide

I'm currently working on creating a tooltip using JQuery for incoming list items. Users will input text in a textfield, press enter, and those values will be displayed in a visible list on the website. I intend to have a tooltip associated with each i ...

The URL provided by window.location is not accurate

I'm facing an issue with the code window.history.pushState("", "title", myCtxURLVersion); which is supposed to change the current URL of the page. However, when I implement this code, the URL displayed is incorrect. For example, even though the brows ...

Adjust the HTML content prior to displaying it to prevent any flickering

Is there a way to run code before the page is rendered, such as updating dates or converting text to HTML, without causing flickering when reloading multiple times? How can I ensure the code runs as it's drawn instead of waiting until the end to redra ...

Utilizing jQuery to extract the `h1` element from a dynamically loaded external page within the

I am facing a challenge in selecting an h1 element from a remote page that I have loaded into $(data). Despite several attempts, I am struggling to write the correct code. When I use this code: console.log($(data)); The output is as follows: [text, meta ...

Is there a way to have the span update even if the input stays the same? Currently, it only changes when the input is different

Retrieve results of 3 lines (Ps) by entering a word in the text area and clicking search. If the word is found after clicking the button, a span will be displayed with the count of occurrences as well as the highlighted P(s) where it was found. If the wo ...

Utilizing the Ajax success callback to trigger a subsequent Ajax request as the loop iterates

I am currently working on a piece of javascript/jquery code that involves making ajax requests. The code snippet I have includes various variables and functions for handling external data sources and templates. var trigger = $('#loadTabl ...

What steps can I take to make sure JSON keys containing only digits are treated as Strings instead of Numbers?

Within a JSON String, I have IDs as keys, represented as Strings of numbers, while the values are actual Numbers (Float). The problem arises when parsing this information to obtain an object in Safari 10.1.2... var jsonData = "{\"53352\":0.6, ...

Transferring data from JavaScript to PHP for geolocation feature

Hello everyone, I'm looking to extract the longitude and latitude values from my JavaScript code and assign them to PHP variables $lat and $lng. This way, I can retrieve the city name and use it in my SQL query (query not provided). Below is the scrip ...

Having trouble with input functionality on iPad due to a CSS, LI, div, or clipping issue?

One challenge I am facing is related to several inputs housed within an LI and div that are sortable using jQuery. The problem arises specifically on the iPad when attempting to click into the inputs to enter information - there is no caret appearing, ren ...

Is there a way to prevent pixels from being rendered outside of a designated rectangle in HTML5?

I'm looking to add screen-in-screen functionality to my HTML5 game, and I have an idea for how to approach it: //Function called every frame function draw(){ set a mask rectangle only draw pixels from the current frame that fall within this recta ...

What is the best way to search for all results in MongoDB that have x appearing in any property?

Is it possible to search for all pictures in the mongoose framework with node and express that contain a specific parameter, regardless of which property holds that parameter? For example: If I enter "John Snow" in the search bar, I want to see all pictur ...

Preventing Javascript array elements from being overwritten: Best practices

My challenge lies with the addToClients() function, which is designed to add a new value to the clients array whenever a button is pressed. The issue I am facing is that each time I press submit, the previous element in the array gets replaced by the new o ...

Is Selenium designed to work with standalone browsers (using webdrivers) or with browsers that are already installed on the operating system?

I am a newcomer to Cross Browser Testing and have just begun exploring Selenium. However, I am having trouble finding the answers to the following questions on the official site. It would be greatly appreciated if someone could help clarify them for me. ...

Don't forget to retain the checkboxes that were chosen in the

I am looking for a solution to a specific scenario. When I open a modal box and check some checkboxes, I want those same checkboxes to be selected the next time I open it. Below is an example of my code. Main Controller modal function function openModa ...

When using Vue.js router.push, the URL gets updated but the RankerDetail component does not refresh when navigating with a button

I am currently working on a Vue.js project that involves vue-router, and I've encountered an issue with the RankerDetail component. This particular component is responsible for dynamically displaying data based on the route parameter id. Strangely, wh ...

Pattern matching in JavaScript using regular expressions is used to identify and extract repeating patterns,

There is a specific string that contains structured data and multiple instances of @doc { within it. I need to extract these occurrences, making sure the result includes two unique matches. To achieve this, regular expressions come in handy: var matches = ...