ng-include not functioning properly within ng-table

In the table, there is a data structure

<tr
  ng-repeat="question in $data"
  ng-include="'/views/partials/questionList.html'"></tr>

Within the questionList.html file:

<td class="top-td" data-title="'ID'" sortable="'id'">
  <a href="#" ng-click="loadQuestionModal(question.id)">
    {{ question.id }}
  </a>
</td>
<td class="top-td" data-title="'Question / Instruction'">
  <h6 markdown-to-html="question.Instruction.instructionText"></h6>
  <blockquote ng-show="k8englishSubject" markdown-to-html="question.questionText"></blockquote>
  <blockquote markdown-to-html="question.questionText" mathjax-bind="question.questionText" ng-show="k8mathSubject"></blockquote>
</td>
<td class="top-td"><ng-include src="'/views/partials/answerList.html'"></ng-include></td>
<td class="top-td" ng-show="k8englishSubject">
  <a ui-sref="passages.upsert({passageId: question.PassageId})" ng-show="question.PassageId">
    {{ question.Passage.passageTitle }}
  </a>
</td>
<td class="top-td" data-title="'Level'" sortable="'level'">{{ question.level }}</td>

Nevertheless, this format does not display any titles. On the contrary, if a standard tr tag is used and the td elements are placed within the same view, it functions properly.

javascriptangularjsngtable

Answer №1

It's a bit unclear, but ng-repeat and ng-include both create child scopes.

I recommend replacing ng-include with a custom directive to avoid the extra child scope.

<tr  ng-repeat="question in $data" my-directive></tr>

JS

app.directive('myDirective',function(){
    return {
         restrict:'A',
         templateUrl:'/views/partials/questionList.html';
     };
});

Currently, this directive only provides the template and inherits the parent scope of each ng-repeat child during each iteration

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 to target and set focus on dynamically generated input field when the ID is unknown

I am facing an issue with a jQuery/AJAX function that loads HTML form elements from the server. The form fields vary, and I want to set focus on the first available input field after the load is complete. I have tried: $(':input:enabled:visible:firs ...

javascriptjqueryfocusforms

Guide on displaying a list of images in a single line with rows and columns

I am in search of a solution to create the user interface depicted in the attached image using React. Additionally, this post includes a link to another post on the same site: How to add a single line image list that is horizontal scrollable (in react js). ...

javascripthtmlcssreactjsmaterial-ui

Obtain the element created by a directive within the controller

I'm currently utilizing the wrapper located at: https://github.com/Yankovsky/nouislider-angular/blob/master/nouislider.js for the nouislider plugin. Within my controller, I aim to access the element that I've created in the template: <div ya ...

javascriptangularjs

Creating an associative array in javascript: A step-by-step guide

I require an array to be structured in the following manner: {"3": {"label":"All i want for christmas", "song":"Alliw_1405399165.mp3", "name":"All i want for christmas"}, "4": {"label":"Call your girlfriend robyn clip", "song":"Gang ...

javascriptarrays

Create a more concise JavaScript function for updating MongoDB using if/else statements

Can this function be optimized for efficiency and readability? I'm not a fan of the repetitive if/else structure, especially considering that it's only setting 'status.edited': false when method equals 'reset'. Otherwise, it s ...

javascriptmongodbmongodb-query

Dynamic scrolling text for overflowing text display

Here's a scenario I'm facing: Let's say I have three div tags, each 100 pixels wide: <--- DIV WIDTH ---> Text in div 1 Text in div two, it overflows Text in div three <--- DIV WIDTH ---> Currently, I've set the following C ...

javascriptjqueryhtmlcssmarquee

Expanding size on hover without affecting the alignment of surrounding elements

Imagine there are 10 divs on the page styled as squares, collectively known as the home page. Among these 10: 3 divs belong to the .event1 class, 5 divs belong to the .event2 class, and 2 divs belong to the .event3 class. <div class="boxes event1"> ...

javascriptjqueryhtmlcsscss-transforms

The inline variables in CSS transitions are failing to be detected

The CSS transitions are not recognizing the inline variables, or if they are, they are not receiving the correct information. Below is an illustration of how the inline variables are defined in the HTML: <p class="hidden" style="--order ...

javascripthtmlcss

Issue with AngularJS ng-bind-html and sanitize functionality not functioning properly in version 1.3.8

In my view, I have the following: <div contentEditable="true" ng-bind-html="message" style="clear:both;padding:10px;height:250px;font-family:arial,sans-serif;font-size:13px;resize:none;overflow-y:scroll;border:rgb(229,229,229) solid 1px;margin-bottom:3 ...

angularjs

Utilize jQuery to create a dynamic image swapping and div showing/hiding feature

I'm having trouble implementing a toggle functionality for an image and another div simultaneously. Currently, when the image is clicked, it switches to display the other div, but clicking again does not switch it back. Can someone please advise on wh ...

javascriptjqueryhtmlcss

Is it possible to have both Node.js and browser code in the same file using webpack, while ensuring that only the browser code is accessible and the Node.js code remains hidden?

I need to work with a file that contains both Node.js and browser code. It's crucial that the Node.js code remains hidden when running in the browser environment. Is it possible for Webpack to exclude specific sections of the code based on the enviro ...

javascriptnode.jswebpackisomorphic-javascript

Raspberry Pi encountering a TypeError with Node.js async parallel: "task is not a function" error

I am new to nodejs, so I kindly ask for your understanding if my questions seem simple. I am attempting to use nodejs on a Raspberry Pi 3 to control two motors, and I keep encountering the error message "async task is not a function." Despite searching fo ...

javascriptnode.jsraspberry-piraspberry-pi3

Is there a way to automatically input an array of elements into a form without having to do it manually

Is it possible to create a form using an array of items fetched from a database, and automatically populate the form with each of these elements? Currently, I'm facing difficulties as the form appears empty. What am I missing? Below is the code I ha ...

javascripthtmlreactjsforms

Looking for help in resolving console error displaying 'Uncaught (in promise)' notification

I've encountered an issue while trying to troubleshoot a problem that involves using the find() method, which is causing an error. import { CART_ADD_ITEM, CART_REMOVE_ITEM } from '../constants/cartConstant'; const cartReducers = (state = { ...

javascriptreactjsarraysreact-redux

Stopping the parent onclick event from propagating to a child element within a bootstrap modal

I am currently working with angularjs and bootstrap, incorporating nested onclick events using Angular's ng-click in various HTML elements. One is located in a table header to display different sort icons and execute the sorting logic when the header ...

javascripthtmlangularjstwitter-bootstrapdom

React: When an array state is controlling my components, why aren't they re-rendering?

I am facing an issue with my app where the className of buttons is not updating correctly when clicked. It seems that only active buttons trigger a re-render, while non-active ones do not. This behavior is confusing to me. Here's the code snippet for ...

javascriptreactjs

Display an image when the iframe viewport is reduced in size by utilizing media queries

I am looking to showcase a demo.html page within a 400px square iframe. When the viewport is smaller than 400px, I want demo.html to only display an image. Then, when clicking on that image in demo.html, the same page should switch to fullscreen mode. Sim ...

javascripthtmlcss

Interactive data visualization with hover-over details

I am utilizing datamaps to showcase the countries of the world, however, I want the graph to be centered. The issue arises when I hover over a country and the pop up appears all the way to the left, aligned with where the country would be if it wasn't ...

javascripthtmlcssd3.jsdatamaps

Tips for utilizing a vue.js nested for loop with two arrays using v-for

The issue has been resolved, and both my parent view and child component code are now correct and functioning properly I am using Vue.js with the goal of iterating similarly to a nested for loop to display a matrix table. Initially, I tried to achieve thi ...

javascriptvue.js

The number range filter in ng-table is malfunctioning

what I am trying to accomplish My goal is to create a column that can accommodate two numbers in order to filter numeric data within a specific range for that column. While sorting, pagination, and filtering by 'contain text' are working correct ...

javascriptangularjsngtable