Connect ng-include URL to certain paths

I am working with multiple routes in my application:

routes.js

$routeProvider.when(
  '/dashboard/one', 
  {
    templateUrl: 'partials/dashboard.html', 
    controller: 'DashboardCtrl'
  });
$routeProvider.when(
  '/dashboard/two', 
  {
    templateUrl: 'partials/dashboard.html', 
    controller: 'DashboardCtrl'
  });

The content of my dashboard.html is as follows:

...
<ng-include src="dashboardPath"></ng-include>
...

I need the SRC attribute of the ng-include element to dynamically change based on the route. For instance, I want the dashboardPath to be set as one.html when the current route is /dashboard/one. How can I achieve this dynamic binding between the route URL and the src attribute?

javascriptangularjsangular-ui-router

Answer №1

According to Mathew's suggestion, utilizing ng-view would be the ideal solution. Nevertheless, I will attempt to address your requirements.

To avoid running into issues, it is recommended that you modify the way you assign the URL by binding it to an object property instead of a primitive data type. In an init method, you can implement the following logic:

var path = currentPath; // Fetch it.
$scope.dashboardPath = {};
if (path === '/dashboard/one')
    $scope.dashboardPath.url = 'pageOne.html';
if (path === '/dashboard/two')
    $scope.dashboardPath.url = 'pageTwo.html';

Subsequently, your HTML code should appear as follows:

<div ng-include src="dashboardPath.url">
</div>

Answer №2

To maximize efficiency, it is recommended to utilize ng-view since it follows the route structure:

https://docs.angularjs.org/api/ngRoute/directive/ngView

If you wish to monitor both aspects, consider implementing the following approach:

$routeProvider.when(
  '/dashboard/:type', 
  {
    templateUrl: 'partials/dashboard.html', 
    controller: 'DashboardCtrl'
  });

Then within your controller:

function DashboardCtrl($routeParams){
    $routeParams.type //'one' or 'two'
}

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

Updating NavBar text dynamically based on user login status in React.JS

Within my project, there is a Navigation bar that I access from App.js. Depending on whether I am logged in or not, I want to display different versions of the NavBar. When logged in, the NavBar should have a logout button. And when logged out, it should s ...

javascriptreactjsreact-routerreact-hooks

Adding and removing form fields in a table dynamically using AngularJS

I need to dynamically add multiple form fields when a button is pressed, and I want all the fields to be displayed in a table format (each field should have its own space in a <td>field</td> structure). Currently, I am facing an issue where if ...

javascripthtmlangularjsforms

Clear session data when logging out from a dropdown list

I have a header that appears on several of my web pages. It contains a dropdown menu that allows users to log out by selecting the "Logout" option. When a user clicks on "Logout", I want to destroy the session variables associated with their session. Is t ...

javascriptphpjquerysession

Unlock the power of AJAX in your WordPress site

I've been exploring the realm of Javascript and AJAX lately. I feel like I'm so close to getting it right, but there's something off with how I'm integrating WordPress ajax functions. I've spent a lot of time going through the docu ...

javascriptphpajaxwordpress

What is the best way to determine the file size using Node.js?

My current challenge involves using multer for uploading images and documents with a restriction on file size, specifically limiting uploads to files under 2MB. I have attempted to find the size of the file or document using the code below, but it is not p ...

javascriptnode.jsexpressmulter

Having trouble limiting the number of special characters in AngularJS

I am having trouble restricting special characters and spaces in the input text field. I tried using the following code snippet: ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/" to prevent special characters, but it doesn't seem to be workin ...

javascriptangularjshtml

Utilizing data from a JavaScript array and merging it with basic HTML structure

Every day, a js array source on a remote server gets updated: var io = new Array(); nsi[0] = new Array('','Frank','','Factory worker','Mercedes',374.0,26.2,76,181,'',75,'Audi',1456.5,27 ...

javascriptphparrayssimple-html-dom

InfoWindow from JSON data not displaying in Google Maps V3

My current project involves using PHP to generate a JSON file from data stored in MySQL. One of the goals I have is to display certain pieces of this data in an information window on Google Maps whenever I click on a marker. Although I've managed to ...

javascriptajaxjsongoogle-mapsgoogle-maps-markers

Is there a way to handle templates in AngularJS that is reminiscent of Handlebars?

Is there a way to handle an AngularJS template using a syntax similar to Handlebar? <script type="text/ng-template" id="mytemplate"> Name is {{name}} </script> I know how to retrieve the template using $templateCache.get('mytemplate&ap ...

javascriptangularjstemplateshandlebars.js

Uploading files with Vue.js Element-UI and axios triggers unwanted page refresh

I am utilizing the element-ui file upload component() to manage the frontend of image uploading. All functionalities work flawlessly (file is successfully sent to the server, etc). However, for some reason, after the axios's successful response code r ...

javascriptvue.jsrefreshelement-ui

THREE.JS: Organizing Objects into Multiple Groups

Currently, I am in the process of learning THREE.js and attempting to create a playable Rubik's cube. My goal is to rotate a face as a whole instead of manipulating each cube individually. I have tried placing the cubes within a THREE.Group, but the ...

javascriptthree.js3d

Are HTML5 Track Element Cue Events Working Properly?

My goal is to dynamically assign functions to HTML5's cue.onenter events. This feature is relatively new and currently only supported in Chrome with specific flags enabled (Refer to the example on HTML5 Rocks here). However, I seem to be facing some ...

javascriptnode.jshtmlhtml5-audio

Steps to partially open the Modal Sheet Swipe Step by default

I've set up a modal sheet component with the following structure: <f7-sheet class="myClass" style="height: auto" swipe-to-step :backdrop="false" > <div class="sheet- ...

javascriptvue.jshtml-framework-7

Is there a way to distribute my World instance among several step definition files in CucumberJS?

Currently, I am working on implementing a CucumberJS scenario that involves using multiple steps spread out across two separate step definition files. In this setup, the first step establishes certain variables in the World object which need to be accessed ...

javascriptangularjscucumberprotractorcucumberjs

Transmitting HTTP headers using Node.js

Within my Node JS Express application, I have an API endpoint called 'download' that returns a buffer to the calling application along with a header named 'status', which is a Javascript object. The response from Node sends the buffer ...

javascriptnode.jsexpress

Using DIV to "enclose" all the elements inside

I need assistance with my HTML code. Here is what I have: <div id="cover" on-tap="_overlayTapped" class$="{{status}}"> <form method="POST" action="/some/action"> <input required id="name" name="name" label="Your name"></input> ...

javascripthtmlcssajax

Angular has the capability to rewrite URLs in CSS, providing a unique way

An issue arises in Angular when using a base set and html5mode with SVGs. This causes things like filter: url(#url) to be rewritten as filter: url(/base/#url). https://github.com/angular/angular.js/issues/8934 Disabling html5 mode and removing the base d ...

javascriptcssangularjssvgbase-url

Are there any find all functions available in JavaScript that are built-in?

I frequently work with arrays in JavaScript, and I am facing an issue with the function .find() as it only returns the first occurrence. I need a way to get all occurrences if there are multiple. Below is my code: const condition = [ { info_p ...

javascriptarraysnode.js

The process of uploading data onto a map using jquery is quite inconsistent in its functionality

HTML Instructions: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <me ...

javascriptjqueryajaxcouchapp

Encountering a TypeError with react-rte in Next.js: r.getEditorState is not a valid function

In my Next.js project, I am using a React RTE component. It is displaying correctly, but when I navigate to another component and then return using the browser's back button, I encounter the following error: Unhandled Runtime Error TypeError: r.getEd ...

javascriptreactjsnext.js