Is it possible to nest multiple angular scripts within each other?

I'm facing an issue with nesting two scripts in my code. When I try to open and close the second script, it ends up closing the first one instead of the intended second one.

The technology I am using for the front-end is AngularJS.

The structure of my code is as shown below:

                    <list-form acordeon="true" label="admin.libro.form.libroEdiciones" list="ctrl.item.ediciones"
                               resolve="{openPaisModal: ctrl.openPaisModal,
                                         openCiudadModal: ctrl.openCiudadModal, ciudadService: ctrl.ciudadService,
                                         paisService: ctrl.paisService}"
                               required="true"
                               template-url="libro.edicion.html">
                    </list-form>

                    <script type="text/ng-template" id="edicion.agente.html">
                        <uib-accordion close-others="oneAtATime" class="col-sm-12">
                            <div uib-accordion-group class="panel-default" is-open="element.desplegado"
                                 heading="{{element.id ? element.nombre : 'admin.traduccion.form.nuevoAgente' | translate}}">

                                <div class="row">

                                    <div class="col-sm-10 col-sm-offset-1">
                                        <div class="form-group">
                                            <label-form key="admin.libro.form.nombre" for="nombre" required="true"></label-form>
                                            <input class="form-control" id="nombre" ng-model="ctrl.item.nombre" required>
                                        </div>
                                    </div>

                                </div>

                                <div class="row">

                                    <!-- Inside this row I'm trying to create another list-form and its script -->*

                                </div>

                            </div>
                        </uib-accordion>
                    </script>

Is there a way to solve this issue?


EDIT 1

I want to clarify that I am not attempting to load scripts asynchronously. Below you can find the solution I came up with along with the corresponding code snippet.

Answer №1

Sorry, it's not possible to do that.

One way to combine the two scripts into a single file is by copying the code from the second script and pasting it inside the first script. Then you can simply call the first script file to access both sets of code.

Answer №2

I attempted to achieve the following:

                        <list-form accordion="true" label="admin.book.form.bookEditions" list="ctrl.item.editions"
                                   resolve="{openCountryModal: ctrl.openCountryModal,
                                             openCityModal: ctrl.openCityModal, cityService: ctrl.cityService,
                                             countryService: ctrl.countryService}"
                                   required="true"
                                   template-url="book.edition.html">
                        </list-form>

                        <script type="text/ng-template" id="edition.agent.html">
                            <uib-accordion close-others="oneAtATime" class="col-sm-12">
                                <div uib-accordion-group class="panel-default" is-open="element.expanded"
                                     heading="{{element.id ? element.name : 'admin.translation.form.newAgent' | translate}}">

                                    <div class="row">

                                        <div class="col-sm-10 col-sm-offset-1">
                                            <div class="form-group">
                                                <label-form key="admin.book.form.name" for="name" required="true"></label-form>
                                                <input class="form-control" id="name" ng-model="ctrl.item.name" required>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="row">

                                        <!-- Within this row I was attempting to generate another list-form and its script -->*

                                    </div>

                                </div>
                            </uib-accordion>
                        </script>

The solution involved placing the list-form within the row and script at the same level as the previous one.

Then, simply invoke it using the template-url from the list-form.

Appreciate the assistance from everyone.

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

Deactivating simultaneous Ajax calls in jQuery

What is the best way to stop (abort) a jQuery deferred object with multiple Ajax calls, ensuring that any pending Ajax calls are not executed? Here is an example code snippet: var deferred = $.when( $.getJSON( "a.json" ), $.getJSON( "b.json" ) ) .don ...

Spin a ThreeJS Object3D along a slanted Y axis

I've experimented with various methods to tilt my object and then rotate it around this newly tilted axis, but no matter what I attempt, it always rotates as if the Y axis is pointing straight up. It fails to rotate along the newly tilted axis. WHY? ...

Running LAMP and Node.js concurrently on a single server

Currently, I have a PHP application built on the Laravel Framework and a separate node.js application. The node.js app is responsible for sending push notifications to user browsers using socket.io due to PHP's limitations with long polling processes. ...

Troubleshooting jQuery and CSS problems related to window size discrepancies

My website dynamically calculates the size of each div based on the window size... // Functions to begin $(document).ready(function(){ $('.wrapper').css({'top' : '0px','left' : '0px'}); $(&ap ...

Why aren't the divs appearing on the page?

I have developed a JavaScript and PHP page where the script in the PHP page sends data to my SQL database. However, the result is not displayed on my home page. Here is the code snippet: function getVote(question_ID) { var option_ID = document.queryS ...

Utilize Node.js to compress folders and save them locally by zipping and downloading

Is there a way to zip and download a folder from the path D:/downloads? I have successfully created a folder inside 'downloads' with some dummy content. Now, my next goal is to zip that folder and download it. async downloadFolder(selectedProdu ...

How to pass arguments to the `find` method in MongoDB collections

I've been attempting to pass arguments from a function to the MongoDB collection find method. Here's what I have so far: async find() { try { return await db.collection('users').find.apply(null, arguments); } catch(err) { c ...

How can I utilize ng-repeat in AngularJS to iterate through an array of objects containing nested arrays within a field?

Here is the structure of an array I am working with: 0: {ID: null, name: "test", city: "Austin", UserColors: [{color: "blue"},{hobby:"beach"} ... ]} }... I am currently attempting to ng-repeat over this initial array in my code. However, when I tr ...

What is the best way to search for relational/nested schemas in mongoose?

I currently have two Mongoose schema models set up. Let's start with the GroupSchema model: const GroupSchema = new mongoose.Schema({ name: { type: String, required: true }, admins: { type: String, default: ...

Triggering Submit Button Based on Checkbox Value in jQuery

Hey there, I'm encountering an issue. Let's say I have two types of checkboxes - one for person and one for company. If I submit the form without checking any of the person or company checkboxes, I want jQuery to display an alert. Otherwise, the ...

Mongodb Node.js - Kerberos module could not be located

After successfully installing mongodb via npm, I encountered an issue when trying to run my app. The error message received was: Error: Cannot find module '../build/Release/kerberos' from '/Users/snorre edwin/Code/raspberry-node- se ...

Self-recall of callbacks

I am facing a challenge where I need to insert a random number into a database column that serves as the primary key. However, there is an issue when the randomly generated number already exists in the database. In such cases, I want to trigger the proces ...

JavaScript loop used to create markers on Google Maps

I am currently in the process of developing a basic Google map which includes markers and involves looping through the data source for the markers. When I replace key.lng or key.lat with hardcoded values in the code below, everything functions correctly. ...

Using AngularJS to Dynamically Set the Default Selection in a SELECT Element

In my code using JADE syntax, I have the following structure: select(ng-model="eventTypeUI") option(ng-repeat="c in eventUI", ng-value='c.value', ng-disabled='selectEventCanNotBeUsed(c.value)') {{c.name}} ...

Creating a Mongoose schema with a predefined key variable

I am currently utilizing expressjs, mongodb, and mongoose. My goal is to update the counts object within the given schema: var UsersSchema = new Schema({ username: { type: String, required: true }, counts: { followers: { type: Number, default: 0 } ...

Enhance frontend user experience by automatically updating AJAX scripts using jQuery

I have a script that currently only works on the initial page load, but I want to modify it to automatically update every 30 seconds. How can I achieve this desired effect? $.ajax({ type: "GET", url: "Administration/data/people.xml" }) ...

Including a variable in an array within a function

I'm encountering an issue with inserting a variable into my array. Below is the code snippet: var data = new Array(); google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/r ...

Limit pasted content in an Angular contenteditable div

Is there a way to limit the input in a contenteditable div? I am developing my own WYSIWYG editor and want to prevent users from pasting content from external websites and copying styles. I want to achieve the same effect as if the content was pasted into ...

"Unveiling the Mystery: Retrieving the selected option at index x in AngularJS Jasmine

Exploring the Angular website, I came across an interesting unit test example which can be found here. Please note that you need to click on the protractor.js button as there is no direct link to the unit test code. Below is the snippet in question: elem ...

Choosing from a variety of tr elements

I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue. Using nth-child seems like an option, but it can get quite verbose if I nee ...