Could the issue be related to a bug in the combination of ng-repeat and ngInclude?

I've been experimenting with loading different templates in this manner:

<div ng-class="{active:$first,in:$first,'tab-pane':true}" id="{{p.path}}_settings" ng-repeat="p in panes" ng-include="buildPath(p.path)">
</div>

Here's the accompanying controller:

$scope.panes = [{
  name: 'xxx',
  path: 'alarm'
}, {
  name: 'yyy',
  path: 'scan'
}, {
  name: 'zzz',
  path: 'client'
}];

$scope.buildPath = function(path) {
  return 'templates/partials/settings_' + path + '.html';
}

Everything was working smoothly. However, I decided to disable caching by adjusting the path:

$scope.buildPath = function(path) {
  return 'templates/partials/settings_' + path + '.html?_=' + Date.now();
}

After making this change, the browser encountered issues loading duplicate pages.

Any suggestions on what may have caused this? Could it be a bug?

javascriptangularjs

Answer №1

Instead of creating a brand new template URL, you can simply eliminate the previous one from the cache (in this instance, the $templateCache).

All you need to do is inject $templateCache and utilize the remove function to erase the previous URL:

$scope.buildPath = function(path) {
  var url = 'templates/partials/settings_' + path + '.html';
  $templateCache.remove(url);
  return url;
}

Alternatively, you can enhance your div with this directive:

app.directive('no-cache', ['$templateCache', function($templateCache) {
    var directive = {
        restrict: 'A',
        scope: false,
        link: function(scope, element, attrs) {
            scope.$parent.$watch(attrs.ngInclude, function(new, old){
                $templateCache.remove(old);
            });
        }
    };
    return directive;
}]);

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

Steps for modifying material-ui timepicker to display time in a 24-hour format

Presently, I am utilizing a Timepicker from material-ui. It is currently configured with type="time", allowing me to select times throughout the day in 12-hour increments with an AM / PM choice. However, I wish to adjust my picker to a 24-hour format, elim ...

javascriptcssreactjsmaterial-ui

Transferring information from jQuery to AngularJS controller

Is there a way to transfer data generated by jQuery into an AngularJS controller? <textarea ng-click="showSelectedText(selection.text)" name="editor1" id="editor1" cols="118" rows="35"> Using jQuery to collect data: $( "#editor1" ).select(funct ...

javascriptjqueryangularjs

When Infinite Scroll is integrated into another file with HTML tags stacked on top, it will not load additional posts when scrolling down

I have implemented an Infinite Scroll feature that dynamically loads more data from a database as users scroll to the bottom of the page. However, I encountered an issue when trying to include this functionality in another .PHP file. If I insert any HTML ...

javascriptphp

Click on the form to initiate when the action is set to "javascript:void(0)"

I am working on an HTML step form that needs to be submitted after passing validation and ensuring all fields are filled. The form currently has an action controller called register.php, but also includes action="javascript:void(0);" in the HTML form. What ...

javascripthtmlforms

RequireJS - Enabling the loading of multiple module instances

I am working on a custom RequireJS plugin that needs to create a new object instance every time it is called. For illustration purposes, consider the following: define("loader", { load: function(name, req, onload, config) { var instance = GlobalGet ...

javascriptrequirejs

Implementing the sticky positioning property to keep a div container fixed at the bottom of the page

As Bootstrap 4 no longer supports .affix, I had to look for an alternative solution to keep a box fixed. I needed a div container to remain fixed as you scroll to it. My current workaround is using: .fixedcard{ position: sticky; top:75%; } However, th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Distinguishing the variance among $http.get, $http.post, $http.put, $http.delete, $http.head, and $http.jsonp

Welcome, everyone! I am diving into the world of AngularJS and web development, and could use some guidance. Recently, I came across $http in AngularJS, but I am only familiar with the get and post methods. Can someone explain to me the distinctions betwe ...

angularjsangularjs-directiveangularjs-scope

Issue with nav-pill not functioning properly on localhost server set up with XAMPP

<!-- Customized Navigation Pills --> <ul class="nav nav-pills" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">My Home</a> </li> <li class="nav-item ...

htmlangularjstwitter-bootstrapxamppnav-pills

Top method for developing a Wizard element within React

As I delved into learning React, my focus shifted towards creating a Wizard component. My initial vision was to use it in this way: <Wizard isVisible={this.state.isWizardVisible}> <Page1 /> <Page2 /> </Wizard> However, I e ...

javascriptreactjs

Expand the data retrieved from the database in node.js to include additional fields, not just the id

When creating a login using the code provided, only the user's ID is returned. The challenge now is how to retrieve another field from the database. I specifically require the "header" field from the database. Within the onSubmit function of the for ...

javascriptnode.jsangulardatabasetypescript

developing a stand-alone job listings feature

Our website features a job postings page that our clients are interested in incorporating into their own websites. This would allow applicants to easily apply for jobs directly on the client's site, with the information being saved in our system. One ...

javascriptasp.net

Unable to select image inside linked container

I'm attempting to display a dropdown menu when the user clicks on the gear-img div using jQuery. However, because it's wrapped inside an a tag, clicking redirects me to a URL. I also want the entire div to be clickable. Any suggestions for a solu ...

javascriptjqueryhtmlcss

Validating fields using JavaScript and HTML

I'm having an issue with the code below because it only allows me to log in with the user and password from the last position of the arrays. I want it to let me login with each user and their corresponding password, for example, user at position 1 wit ...

javascripthtmlfor-loopif-statement

The conundrum of jsPDF's image compatibility

I am attempting to generate a PDF document on the client-side using the jsPDF library. The code I have written is as follows: <script type="text/javascript" src="libs/base64.js"></script> <script type="text/javascript" src="libs/sprintf.js" ...

javascriptjspdf

Performing a mass update in MongoDB with the help of mongoose

Is there a way to perform bulk upserts with Mongoose? Essentially, I want to have an array and insert each element if it does not exist, or update it if it does. (I am using custom _ids). When I try using .insert, MongoDB throws an error E11000 for duplic ...

javascriptnode.jsmongodbmongoosemongodb-query

if statement for a method within the ng-click directive

Whenever I click the button, I want to either execute createRole() if RoleName is not set or EditRole() method if RoleName is set. However, for some reason, EditRole() is being executed for both cases. <button type="submit" ng-click="selectedItem.Rol ...

javascriptangularjsangularjs-ng-click

The Best Way to Refresh a ReactJS Component in Plain HTML/JavaScript

So here's the situation. I'm diving into creating a React Modal component that can seamlessly integrate with any vanilla HTML / JS file. By generating a bundle.js file using Webpack from my React component, it becomes easier to inject it into a d ...

javascriptjqueryhtmlreactjsdom

Is it possible to enhance an external class with a non-static method using prototypes?

Is it possible to use prototypes to add a function for a class instance? allowing me to access this or __proto__ keyword inside my method, like so: class PersonClass { name: string; constructor(name: string) { this.name = name; } sayHello() ...

javascripttypescriptprototype

transferring information from a list display to a more detailed view in angular.js

My application follows the CRUD model, using separate routes and controllers for both the list view and detail views. The data displayed in the list view is fetched using a $resource. Currently, my detail view controller makes an additional http request ...

angularjs

What is the best way to ensure Leaflet-Search functionality remains active even when a layerGroup is toggled off using L.control.layers

I am encountering challenges while using the Leaflet.Control.Search plugin by Stefano Cudini in conjunction with Leaflet's built-in function L.control.layers. When all layers are active, there are no issues with locating a specific area. However, wh ...

javascriptleaflet