the reason behind the peculiar behavior of angularjs ng-include

I am attempting to utilize an ng-template to iterate through my args in order to create an indented menu content. Unfortunately, I have encountered issues with ng-include not working as expected. I have tried adding a quote but it still does not work.

For reference, here is a simple example: http://codepen.io/elvis-macak/pen/meropX

body(ng-app="app",ng-controller="MainController")

  script(type='text/ng-template', id="data-list.html")
    span {{key}}
    span {{value}}

  div
    div(ng-repeat="data in datas")
      h3 {{data.date }}
      ul      
        li(ng-repeat="(key, value) in data")
          span {{key}}
          span {{value}}
      ul
        li(ng-include, src="data-list.html", ng-repeat="(key, value) in data")

The issue I am facing is that it cannot print out the script content inside.

Any assistance on why this may be happening would be greatly appreciated.

Answer â„–1

It appears that you are trying to implement ng-include within an ng-repeat loop. Although I am not familiar with Jade, based on the compiled HTML from your example:

<li ng-include="ng-include" src="'data-list.html'" ng-repeat="(key, value) in data"></li>

The parameters for ng-include are incorrect and should be adjusted as follows:

<li ng-include src="'data-list.html'" ng-repeat="(key, value) in data"></li>

This modification seems to resolve the issue. It is worth noting that using ng-include within an ng-repeat loop can impact performance negatively. For more complex requirements, such as incorporating intricate views within ng-repeats, consider utilizing a directive, which aligns with Angular's approach to DOM manipulation.

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

Is there a way to continuously click on a button 99 times or until the code finishes running?

Need Assistance, Please Assist. I am encountering an issue where I have the same type of skip button with identical name and id properties for all products, but only the xpath changes. Can you provide guidance on how to efficiently click on 99 similar ski ...

Sharing the directive scope with transcluded elements is crucial for enabling seamless communication

I've been working on a reusable modal directive, but I'm facing an issue with the transcluded elements creating their own scope. You can see the problem in action on this JSFIDDLE. Here is how it currently functions. <button ng-click="show=!s ...

"Efficient Ways to Manage Various File Types in React: xlsx, pptx, doc, docx

I am encountering an issue with downloading files in my React application. The API is functioning properly as confirmed using Postman, where different file formats such as xlsx, pptx, doc, docx, ppt and xls can be downloaded and opened successfully. Howev ...

Tips for effectively handling unique properties of a React component (such as Redux integration and custom CSS) when sharing through NPM distribution

Question: How can custom Redux containers and CSS be effectively managed with NPM? It can be challenging to handle these custom files through traditional package distribution platforms like NPM, especially when they need to be edited in various projects. ...

React: Introducing the latest router feature post-login

I'm facing an issue with the Router in React. After a successful login, I am changing the type state in Redux from 0 to 1. However, when I try to make a switch in my App file, I encounter an error. Warning: [react-router] You cannot change <Router ...

Executing a JavaScript function within a React web application

Having trouble calling JS functions from ReactJS? I recently encountered an issue when trying to import and call a JS function in a button onClick event in my React project. Specifically, when trying to use this.abtest.events.on in the handleButtonColor fu ...

Multiple occurrences of setting the state on an array result in logging an empty array each

My current challenge involves fetching data from a backend server and storing it in an array. However, when I attempt to pass this array to another component, I encounter an issue where multiple empty arrays are being passed instead of one filled with data ...

Transforming a single object into multiple arrays using AngularJS

Just starting out with AngularJS and I've got some data that looks like this { day1: 0, day2: 0, day3: 0, day4: 2 } Is there a way to convert this data into arrays structured like below? [     ["day1": 0],     ["day2": 0],   ...

Should I refrain from storing user files on my server?

Greetings! I am currently working on an Express js + React js application and using MySQL for database management. I have successfully stored user information like email, hashed passwords, and user IDs in the database. However, now I want to create ...

What is the best way to recycle a variable in TypeScript?

I am trying to utilize my variable children for various scenarios: var children = []; if (folderPath == '/') { var children = rootFolder; } else { var children = folder.childs; } However, I keep receiving the following error message ...

Unfortunately, my capabilities do not allow me to execute the command 'ng build --configuration production

This is the issue that I am facing and need assistance: Error: src/app/app.component.html:1:1 - error NG8001: 'fuse-progress-bar' is not recognized as a valid element: If 'fuse-progress-bar' is an Angular component, please ensure that ...

Personalizing a Doughnut Graph

Currently in the process of creating a donut chart I am looking to achieve a design similar to the image below, where the values are displayed within the colored segments import DonutChart from 'react-d3-donut'; let data = [{ count ...

The function is not recognized in C# programming language

Whenever I try to trigger functions by clicking buttons, nothing seems to happen and an error message appears in the console. Uncaught ReferenceError: AddressInputSet is not defined at HTMLButtonElement.onclick I'm new to this and could use ...

Retrieve the value of an object from a string and make a comparison

var siteList = {}; var siteInfo = []; var part_str = '[{"part":"00000PD","partSupplier":"DELL"}]'; var part = part_str.substring(1,part_str.length-1); eval('var partobj='+part ); console.log(par ...

Editing JSON files - Substitute the $scope object with a new value

I am facing an issue with extracting data from an external JSON file for my application. Although most of the data loads into a DataTables table successfully, I am encountering problems with the $scope variable since it is referencing external data. Specif ...

We apologize, but the module you are looking for cannot be found: Unable to locate 'fs'

Trying to create a new MDX blog website using Next.js 13 with the latest app router, but encountering an error message saying "Module not found: Can't resolve 'fs'". It was working fine in Next.js 12 and pages directory, but not in the lates ...

What should be triggered when clicking on the cancel button in Bootstrap's modal: `close()` or `dismiss()`?

Bootstrap's modal offers two methods for hiding the dialog: close(result) (Type: function) - Used to close a modal by providing a result. dismiss(reason) (Type: function) - Used to dismiss a modal and provide a reason. Should I use close when the u ...

AngularJS using the ng-controller directive

I am presenting the following HTML code excerpt... <!DOCTYPE html> <html lang="en-US" ng-app> <head> <title>priklad00007</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angula ...

What is the best way to transform an array of arrays into an array of objects using AngularJS?

Here is some code I am working on: $scope.students=[]; $scope.students[[object Object][object Object]] [0]{"id":"101","name":"one","marks":"67"} [1]{"id":"102","name":"two","marks":"89"} I would like to reformat it into the ...

Issues with concealing the side menu bar in Vue.js

I've been attempting to conceal the side menu bar, with the exception of the hamburger icon when in the "expanded" state. Despite my efforts to modify the CSS code, I am still struggling to hide the small side menu bar. The following images represent ...