Preserving the scope value when refreshing the page from the cookie storage

One of my controllers has the code below:

$scope.artistId = $cookies.artistId; 

$scope.artistName = $cookies.artistName;

$scope.switchArtist = function(artist) {

    $scope.artistName = '';
    $scope.artistId = '';

    $scope.artist = artist;

    $cookies.artistName = artist.name;
    $cookies.artistId = artist.id;

    $scope.artistName = artist.name;
    $scope.artistId = artist.id;

    $rootScope.$broadcast(ARTIST_EVENTS.switchedArtist);

};

My view contains:

{{ artistName }}

Although triggering the $scope.switchArtist(); function works, the value of $scope.artistName disappears from my view when I refresh the page.

[edit]

I am currently using angularjs 1.3.14

javascriptangularjscookies

Answer №1

In my understanding, it is recommended to utilize .get and .put methods for accessing $cookies rather than simply using dot notation. For further clarification, you may refer to the documentation for version 1.4 in this link - if that pertains to the version you are currently working with.

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

Converting an HTML page into a base 64 string: Step-by-step guide

Currently, I am utilizing Angular 6 for my project. On the index page, I am binding data and then submitting it to the database. My objective is to submit the entire HTML page with the bound data as a string in the database. Is there a way to convert an H ...

javascriptangular

You cannot click on a React subcomponent

I am currently working on implementing a "Title" component within a header. The idea is that when you click on the title component, a header will appear with various buttons for formatting options such as bold and underline. This concept was inspired by a ...

javascriptreactjsmaterial-ui

Is there a way to troubleshoot the "module not found error" that keeps popping up when I attempt to execute the code following a smooth installation of sqlite3?

Initially, I successfully installed the sqlite3 module but encountered errors like "module not found". However, upon attempting to reinstall sqlite3 (npm install sqlite3), more errors surfaced that required thorough post editing. The output is as follows: ...

javascriptnode.jssqlitenpm

Unfortunate escapement of characters discovered in variable that returns JSON image source

I am currently utilizing Google Tag Manager to incorporate the 'article' JSON markup and retrieve different variables for modifying specific sections on particular pages. Among the elements I am attempting to obtain is the image source. At prese ...

javascriptjsongoogle-tag-manager

Objects within an array are not sorted based on their properties

I'm currently struggling with sorting an array of objects based on a specific property. Despite my efforts, I can't seem to figure out what's causing the issue as it remains unsorted. Would appreciate some assistance. You can take a look at ...

javascriptreactjssorting

The loading icon in JavaScript failed to function when JavaScript was disabled in the browser

On my blogger website, I tried using JavaScript to display a loading icon until the page completely loads. However, this method did not work when JavaScript was disabled on the browser. Only CSS seems to provide a solution. document.onreadystatechange = ...

javascriptjqueryhtmlcssblogger

Struggles encountered while developing a JavaScript calendar

Hey guys, I'm encountering an issue with Uncaught TypeError: document.getElementById(...) is null. I believe the problem lies in the way types are being parsed for document.getElementById(dayOfWeek).appendChild(dayPTag);. This code is meant to display ...

javascripthtmlnullcalendartypeerror

Link that updates periodically linked to an image

My goal is to have a URL change on a timer that is linked to an image. For example, after 10 seconds, I want the URL attached to the image to change without changing the actual image itself. I've been trying to figure out how to modify this code, but ...

javascripthtmlcss

transferring information from browser storage to the server

On my web app, there is a feature that saves data to local storage and converts it to a JSON object. I'm interested in passing this local storage data to my server using AJAX, so that other clients of the web app can access it. Is there a way to accom ...

javascriptajaxjsonlocal-storage

I am having trouble getting the hoverOffset feature to work with doughnut charts in vue-charts.js

It appears that no matter what I try, the hoverOffset property is not working on my doughnut charts. Here's the component code: <script> import { Doughnut } from 'vue-chartjs' export default { extends: Doughnut, props: { ch ...

javascriptvue.jschart.jsvue-chartjs

Pass the form data to the next page with javascript in HTML

While working on a website for a power plant, I encountered some issues that require assistance. The main problem is that our client does not want to set up a database on their server. This means I can only use html, javascript, and a bit of php. There is ...

javascriptphpjqueryhtmljquery-mobile

The code that runs perfectly in one IDE may not function properly in another - specifically for html and css

Here is the code snippet that I have been working with: document.addEventListener("DOMContentLoaded", function(event) { // Get a reference to the <path> var path = document.querySelector('#star-path'); // Get length of path... ~577p ...

javascripthtmljquerycssanimation

Exploring the possibilities of manipulating the query string with Vue router in vue.js

I've been working on a Vue.js app that includes a tagging feature. I'm looking to implement URL parameters like where users can add tag_ids by interacting with the UI. Although I've successfully managed to update the tag_ids within the app ...

javascriptvue.js

How to identify when a user has reached the bottom of a div element in HTML using JavaScript

Recently, I ventured into the world of JavaScript and attempted to create a script that can detect when a user reaches the end of a div tag. After some searching, I came across this code snippet: <!DOCTYPE HTML> <html> <head> <sc ...

javascripthtmlcss

Begin using datatables with the xp:table component

Within an XPage, there is a table component: <xp:table id="tblProposals"> I am looking to apply the datatables plugin to this table using a scriptblock component: <xp:scriptBlock id="scriptInitProposals"> < ...

javascriptdatatablesxpages

Fetch data dynamically upon scrolling using an AJAX request

Instead of making an ajax call to load data, I want to do it on scroll. Here is the code I have: $.ajax({ type: 'GET', url: url, data: { get_param: 'value' }, dataType: ' ...

javascriptjqueryajax

Enhanced Bootstrap Carousel with White Background Transitions

Having trouble articulating my issue, so here's a video that should clarify: https://example.com/video I'm using a bootstrap carousel template for a full-width slider. Despite my efforts to remove the white-space transitions, they persist. Am I ...

javascripthtmlcsstwitter-bootstrap

Is it possible for OrbitControls to maintain rotation based on model origin even while panning?

Let me illustrate my question through an image: Shown here is the top view from the camera, with a grey cube representing a 3D model. The 'X' marks the center of rotation, while the arrow indicates the direction of rotation: Typically, when p ...

javascript3dthree.js

Uh oh, ERROR @wdio/runner: Looks like we hit a snag. The session could not be created because this version of ChromeDriver is only compatible with Chrome version

While trying to run a script in WebdriverIO V6 with the Cucumber framework using a local Chrome browser version 85.0.4183.83, I encountered an error stating 'ERROR @wdio/runner: Error: Failed to create session. session not created: This version of Chr ...

javascriptnode.jswebdriver-io

The conditional statement of either/or

I need to create a button that changes based on whether checkboxes are checked. If none are checked, I want to show a disabled button. If one or more are checked, I want to display a different button. JavaScript $("#checkAll").change(function ( ...

javascripthtmljqueryif-statement