The AngularJS directive "ng-include" is used to dynamically

I am encountering an issue with ng-include not retrieving the file. What could be the reason for the problem in accessing a property from a link within ng-include? I would appreciate any assistance with resolving this matter.

(function(){
var app = angular.module('AVS', []);
  
  app.controller('TestCtrl', function($scope){
  var tabClasses;
  
  function initializeTabs() {
    tabClasses = ["","","",""];
  }
  
  $scope.getTabClass = function (tabNum) {
    return tabClasses[tabNum];
  };
  
  $scope.getTabPaneClass = function (tabNum) {
    return "tab-pane " + tabClasses[tabNum];
  };
  
  $scope.setActiveTab = function (tabNum) {
    initializeTabs();
    tabClasses[tabNum] = "active";
  };
  
  $scope.tab1 = " ";
  $scope.tab2 = "dsadasa ";
  $scope.tab3 = "dsadas ";
  $scope.tab4 = "dsadsa ";
  
  //Initialize 
  initializeTabs();
  $scope.setActiveTab(1);

  $scope.sutabs = {
    name: ['Life Safety Manager™', 'Life Safety Elements', 'Fire Dampers', 'Fire Extinguishers'],
    number: [1,2,3,4],
    status: ['','','','']
  };

  $scope.lsm = {
    name: ['Life Safety Manager ™', 'Life Safety Elements', 'Fire Dampers', 'Fire Extinguishers'],
    pathname: ['life-safety-manager', 'Life-Safety-Elements', 'Fire-Dampers', 'Fire-Extinguishers'],
    number: [1,2,3,4],
    status: ['','','','']
  };

    $scope.lstabs = {
    name: ['Life Safety Master Plans', 'Evacuation Maps', 'Fire Suppression', 'Fire Alarm Layouts', 'Exit Path Layouts', 'Life Safety Devices', 'Occupancy','Wayfinding'],
    pathname: ['Life-Safety-Master-Plans', 'Evacuation-Maps', 'Fire-Suppression', 'Fire-Alarm-Layouts', 'Exit-Path-Layouts', 'Life-Safety-Devices', 'Occupancy','Wayfinding'],
    number: [1,2,3,4,5,6,7,8],
    status: ['','','','','','','','']
  };

});
})();
  <div class = "row" ng-controller='TestCtrl'>
    <div class ="col-md-2"> 
      <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
         <li ng-class="getTabClass({{lsm.number[0]}})" ng-click="setActiveTab({{lsm.number[0]}})" class = "{{lsm.status[0]}}"><a href="#{{lsm.pathname[0]}}" data-toggle="tab">{{lsm.name[0]}}</a></li>
         <li ng-class="getTabClass({{lsm.number[1]}})" ng-click="setActiveTab({{lsm.number[1]}})" class = "{{lsm.status[1]}}"><a href="#{{lsm.pathname[1]}}" data-toggle="tab">{{lsm.name[1]}}</a></li>
         <li ng-class="getTabClass({{lsm.number[2]}})" ng-click="setActiveTab({{lsm.number[2]}})" class = "{{lsm.status[2]}}"><a href="#{{lsm.pathname[2]}}" data-toggle="tab">{{lsm.name[2]}}</a></li>
         <li ng-class="getTabClass({{lsm.number[3]}})" ng-click="setActiveTab({{lsm.number[3]}})" class = "{{lsm.status[3]}}"><a href="#{{lsm.pathname[3]}}" data-toggle="tab">{{lsm.name[3]}}</a></li>
      </ul>
      </div>
  </div>
  <div class = "col-md-10">
    <div class="tab-content">
        <div ng-class="getTabPaneClass({{lsm.number[0]}})" id="{{lsm.pathname[0]}}" class="content {{lsm.status[0]}}">  
              <div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[0]}}.html'"></div>
           </div>       
          
          <div ng-class="getTabPaneClass({{lsm.number[1]}})" id="{{lsm.pathname[1]}}" class="content {{lsm.status[1]}}">     
              <div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[1].html}}'"></div>
          </div>
          
          <div ng-class="getTabPaneClass({{lsm.number[2]}})" id="{{lsm.pathname[2]}}" class="content {{lsm.status[2]}}">     
              <div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[2].html}}.html'"></div>
          </div>
          
          <div ng-class="getTabPaneClass({{lsm.number[3]}})" id="{{lsm.pathname[3]}}" class="content {{lsm.status[3]}}">     
            <div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[3].html}}.html'"></div>
          </div>       
    </div>
  </div>
</div>

Answer №1

Upon reviewing the demonstration at

https://docs.angularjs.org/api/ng/directive/ngInclude

notice how it does not utilize ''. Instead, it only contains:

ng-include="template.url"

I comprehend the necessity of using '' to denote a string. However, keep in mind that template.url originates from the scope. It is possible that you cannot seamlessly blend static and scoped variables with ng-include.

Apologies if this explanation falls short; I experimented with the plunk provided in the aforementioned link but was unable to successfully combine both elements. Therefore, ensure your scope variable includes the complete URL.

Answer №2

When dealing with the src, it is important to note that {{lsm.pathname[3] will return a string, but adding .html after {{lsm.pathname[3] means it is searching for an html property within pathname[3].

To correct this issue, the code should be adjusted as follows:

<div ng-include src="'disciplinedrawings/life-safety-manager/{{lsm.pathname[3]}}.html'"></div>

An alternative and more concise representation would be:

<div ng-include src="{{'disciplinedrawings/life-safety-manager/'+lsm.pathname[3]+'.html'}}"></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

Scroll bar in Highstock does not completely cover the entire length when dealing with multiple series

Having trouble with the scrollbar on a multi-series line chart where the x-axis represents dates. It seems that the maximum length of the scrollbar is determined by the length of the first, older series. When clicking the 'All' button in the ran ...

Creating a dynamic state management system for multiple Collapse components can be achieved by utilizing

I am trying to create a Collapse menu from array data, Currently, when I click on any menu all sub menus expand I believe my issue lies in not being able to set a unique "open" state for each Main menu I want to avoid assigning a "state" to accommodate ...

Unresolved issue with Jade in Angular Routing

Currently, I am working on building a web server using expressjs and jade for the frontend. I have also implemented client-side routing with angularjs but unfortunately, my UI is not displaying as expected. Below you can find my code and the unexpected out ...

Is it necessary for me to use bindActionCreators?

While going through a post, I couldn't help but notice that the bindActionCreators method from redux wasn't being utilized. Is there a specific reason for this? Could it be that the method is not necessary in this context? The post in question ...

The error message "Adyencheckout is not a constructor" is popping up in my

Struggling to implement the Adyen dropin payment UI in NextJS and facing issues initializing the Adyen dropin component. Attempting to dynamically import Adyen web to avoid window is not defined error, but uncertain on how to use it as a constructor after ...

Unique Tags and Javascript: A customized approach

In the process of developing a web application, I am aiming for high standardization. To achieve this goal, I plan to utilize custom namespace tags that will be modified by JavaScript based on their functionality. For instance: <script type="text/java ...

Experiencing Difficulty accessing Methods with Jmeter-Webdriver

var pkg = JavaImporter(org.openqa.selenium) var support_ui = JavaImporter(org.openqa.selenium.support.ui.WebDriverWait) var wait = new support_ui.WebDriverWait(WDS.browser, 5000) **var support_page=JavaImporter(org.openqa.selenium.WebDriver.Timeouts)** **v ...

Angular animation not firing on exit

I am encountering an issue with my tooltip component's animations. The ":enter" animation is working as expected, but the ":leave" animation never seems to trigger. For reference, here is a link to stackblitz: https://stackblitz.com/edit/building-too ...

How to Trigger a Django View Using Ajax

I am working on integrating Ajax with Django to trigger an action upon button click. I have successfully invoked the JavaScript function, but I am facing issues in calling the Django view. Despite no errors being displayed, the print statement within my vi ...

Substitute all items identified by a particular tag with a component

Is it possible to replace elements with React? I am interested in replacing all elements with a specific tag with an input field when an event like clicking an 'edit' button occurs. I have experience doing this with jQuery, but I would prefer us ...

Retrieving an Object from an Object Group in javascript

I am encountering an issue while looping through something. https://i.sstatic.net/JkqcP.png However, I'm facing difficulties in obtaining the [["PromiseValue"]] object. If anyone can assist me with this, I would greatly appreciate it. Update : Th ...

Tips for resolving undefined error handling in node.js

const fileSystem = require('fs'); const fileName = './prices.json'; const file = require(fileName); const price = require('./prices.json'); const fileName = './prices.json'; if(tmd = message.match(/^!change max ...

What is the best way to insert a React component or raw HTML into another React component?

Dealing with raw HTML markup returned from an AJAX call can be tricky in React. I've tried using dangerouslySetInnerHTML, but React just throws errors when I do. It's like trying to navigate through a maze. After some trial and error, I decided ...

Why is the child's CSS hover not functioning when the body has an event listener attached to it?

Check out the repository link here: https://codepen.io/Jaycethanks/pen/WNJqdWB I am trying to achieve a parallax effect on the body and image container, as well as a scale-up effect on images when hovered over. However, the hover functionality is not work ...

Retrieve the location within the parent mesh

In my scenario, I have a series of meshes organized in a hierarchy as follows: Scene -scene.add(SpaceMesh) -SpaceMesh.add(ShipMesh) SpaceMesh is currently in motion within the scene. However, ShipMesh remains stationary. When I request th ...

Create a POST request to the server using Express.js

I'm facing a minor problem with something I had assumed was doable. I am aiming to create two express routes – one as a GET route named /post-data and another as a POST route called /post-recieve. The code snippet would appear like the following: ...

Enhancing the "click-to-pause" feature with jQuery Cycle

Is it possible to delay the click-to-pause feature on my slideshow until after the first slide transition? Currently, the slideshow becomes clickable as soon as the DOM is ready, which is too early for my liking. Here is a simplified version of my current ...

No response from jQuery's $.getJSON() function

I'm currently experimenting with jQuery by using a script that I wrote. As a beginner in learning jQuery, I am trying to read data from a .json file and display it in a div. function jQuerytest() { $.getJSON( "books/testbook/pageIndex.json", func ...

Tips for personalizing an angular-powered kendo notification component by adding a close button and setting a timer for automatic hiding

I am looking to enhance the angular-based kendo notification element by adding an auto-hiding feature and a close button. Here is what I have attempted so far: app-custom-toast.ts: it's a generic toast component. import { ChangeDetectorRef, Componen ...

I am curious to see the number of people who have made their selection

I am currently using JavaScript to alter the text value from "select" to "selected". My next step is to include the selected text in a cart. Can you please provide some guidance? Thank you in advance. PHP CODE : <a class='btn slct' href=&ap ...