Steps for restarting ng-if / ng-show animation after utilizing $http caching

When working within a factory service, I have to use

$http.get(url, { cache: true })

Within my view, I utilize ng-if or ng-show to initiate a CSS transition.


The issue :

While it works perfectly for the initial request, subsequent requests of the same service function do not re-trigger the animation.

Is there a method to reset / retrigger the ng-if / ng-show animation ?

(The cache is necessary to avoid waiting time, but I still require the opacity animation to be triggered when transitioning between different states).

Thank you !


app.factory('progService', function ($http) {
    var progService= {};
    progService.getProgram = function() {
        return $http.get(appInfo.api_url + 'pages/5', { cache: true});
    };
    return progService;
});


app.controller('programController', function($scope, progService) {
    progService.getProgram().then(function(res){
        $scope.program = res.data;
    });
});


<div ng-if="program.aJsonKey"></div>

Answer №1

Your view isn't being updated because you're passing the same cached object. To trigger the $watcher of ngIf, you need to provide a fresh or new object. You may also need to change the state to true or false as expected by ngIf. To resolve this issue, your code should look something like:

app.controller('programController', function($scope, progService) {
    $scope.program = null;
    progService.getProgram().then(function(res){
        $scope.program = angular.copy(res.data); // This returns a copy of the object, always creating a new object!
    });
});

Answer №2

If you find yourself in this scenario, it may be necessary to create a custom flag. Here's an example:

app.controller('programController', function($scope, progService) {

    $scope.programDisplay = false;

    progService.getProgram().then(function(res){
        $scope.program = res.data;
        angular.element(document).ready(function () { 
            $scope.programDisplay = true;
        });
    });
});

After that,

<div ng-if="program.acf.exerpt && programDisplay"></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

What is preventing the hashmap from including duplicate values in its count in JavaScript?

Currently, I am attempting to tally the occurrences of objects in an array. The array in question has the following structure: [{ Title: 'Einstein', Author: 'Walter Isaacson' }, { Title: 'The Elegant Universe', Author: &apo ...

How can I use str.match to strip out the "$" symbol and display only the numerical value?

Check out this code snippet: value = str.match(/$(\d+)/); Take for instance, Example 1: HK$999 Result to Display = 999 Consider Example 2: HK$1,999.20 Displayed result = 1 (not the desired outcome) How can I show Example 2 as 1999? Thank you every ...

Utilize the existing Google Maps API instance within a single-page application

Imagine I have a Single Page Application (Angular JS application), and I create a Google Map instance on an element with the id googleMap - var mapInstance = new google.maps.Map(document.getElementById(`googleMap`), mapOption) Later on, as I navigate th ...

How can I create an Angular JS select menu that displays data, with the ability to keep one item at

In my Angular application, I have a select menu populated with countries of the world along with their 2-letter abbreviations. I recently learned that you can hard-code an option item before using ng-repeat in a select menu by referring to the Angular doc ...

Tips for rotating a canvas object without changing its position

I am currently in the process of developing a JavaScript game centered around a character positioned on top of the world. Although the earth element is already part of the game, I am encountering an issue with its rotation causing it to shift position as w ...

A novel way to enhance a class: a decorator that incorporates the “identify” class method, enabling the retrieval

I have been given the task to implement a class decorator that adds an "identify" class method. This method should return the class name along with the information passed in the decorator. Let me provide you with an example: typescript @identity(' ...

Ways to transfer information from an axios API to a state in React

I am currently working with an API that consists of an array of objects. My goal is to pass this data into a state in order to display it within a component on a website. First Approach: // Fetches the API data const newData = axios.get(url).then( ...

Guide to constructing a multi-dimensional array using dynamically generated fields and variables

Here is the URL that I wanted to share with you: All the fields visible on this page are generated dynamically from the backend. To display the pricing, I used the field names as variables in the JavaScript below. However, I encountered two issues - first ...

Is it possible for the code to display the value from the previous refresh rather than the most recent value added?

In my project, there is a functionality where a column of buttons in a table triggers a script to read the data associated with the clicked button and send it to another PHP file: <!-- Script that retrieves lecturer details for SHOW functionality - ...

The value of the progress bar in Bootstrap Vue cannot be retrieved using a function

I have implemented a progress bar using Bootstrap Vue. Here is the HTML code: <b-progress :value="getOverallScore" :max=5 variant="primary" animated></b-progress> The getOverallScore function calculates an average value based on three differe ...

Retrieving data from a remote PHP server using JavaScript

I am currently working on two separate websites. Site A is coded using only HTML and JavaScript, while site B utilizes PHP. I am trying to figure out a way to access variables from site B within site A. For example: The code for site A looks something li ...

Tips for triggering the delete function within an Angular controller upon clicking the "yes" button in a PopConfirm

Currently, I am developing a Scala application using Playframework. I am attempting to implement a popover confirm in a smart-table for deletion purposes. My main query revolves around how to trigger the delete function, which has been defined in an Angula ...

Exporting table data in Meteor Blaze

I am encountering difficulties while trying to export a table to CSV in the Meteor/Blaze framework. I am following the guide on: [. My Template.event is responsible for triggering the export button. Template.export.onCreated( () => { Template.insta ...

Adjust image size while maintaining aspect ratio

Currently, I am implementing a resize function for an image by using the following code snippet: $('.image_resize').each(function(){ var ww = $(window).width() - 80 - 400; var wh = $(window).height() - 60; var iar = $(this).attr(&apo ...

Uploading a JSON file to myjson.com using a jQuery PUT request in Node.js

As a novice in javascript, I have successfully retrieved a JSON object from on my HTML page using AJAX with the following code: $.getJSON("https://api.myjson.com/bins/bjm28", function (data) { $.each(data, function (index, value) { console.log ...

Sorting a 2D array in Javascript based on numerical values

I've come across a few similar posts regarding this issue, but none have provided solutions that work for my specific situation. I'm feeling lost on how to solve this problem (like Sort a 2D array by the second value) Let me explain the challeng ...

Using Next.js Link prefetch feature can lead to unexpected 404 errors on a production website

I'm currently working on a Next.JS blog project where I have created a page to showcase all of my articles. When I render the component, it appears like this: <div> {articles.map((article, index) => { const path = `/magazine/${ar ...

Nested arrays within an array in AngularJS can be displayed using ng-repeat

I am having trouble iterating over arrays within arrays. My goal is to create a vertical menu with button-like functionality, but I'm struggling to make it work. angular.module('NavigationApp',[]).controller('NavigationController&apo ...

The hidden textbox loses its value when submitting

I have a form with fields and a RequiredFieldValidator. Additionally, I have another textbox that is hidden which gets populated by a JavaScript function: <script type="text/javascript"> $(document).ready(function (sender, args) { $("#myTextFiel ...

Align the javascript countdown with the server's current time

Attempting to articulate my issue in proper English. Using an AJAX global countdown to show the time left (calculated with server time) using setInterval. The goal is to invoke a function only once when the time left reaches a certain target. $timeLeft = ...