The $cookieStore functionality is malfunctioning when used within controller $scope functions in Angular

Encountering an issue while working with angular-js along with

$locationProvider.html5Mode(true).hashPrefix('!');

Routing is functioning properly, except for the $cookieStore not working within the functions defined in controller $scope. This could possibly be due to the .HTACCESS file I added.

Unable to find a solution, currently utilizing "window.localStorage". Anyone here have a workaround?

Here is a snippet of my code:

HTML

 <button type="button" class="btn btn-default" ng-click='doLogin()'>Sign in</button>

APPLICATION SCRIPT

var app = angular.module('starter', ['ngRoute','ngCookies']);

 app.config(function($routeProvider, $locationProvider) {

    $routeProvider 
    .when('/dashboard', {
    templateUrl: 'pages/dashboard.html',
    controller: 'dashboardApp'
    })  
    .otherwise({
    redirectTo: '/',
    templateUrl: 'pages/login.html',
    controller: 'loginApp'
    });  
    $locationProvider.html5Mode(true).hashPrefix('!'); 
})


app.controller('loginApp', function($scope , $cookieStore ) {

    //This works fine
    $cookieStore.put('Greet','Welcome to Angular!');

    ///////////////////////////////////
    $scope.doLogin = function()
    { 
           // No cookie being set up here
           $cookieStore.put('loggedin', true);
    };

})

.HTACCESS

#BEGIN
Options +FollowSymLinks

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    RewriteRule ^ index.html [L]
</ifModule>

#END

Answer №1

After facing this problem just now, I found your post extremely helpful in identifying the root cause. I decided to create a plnkr to test it out and realized that I could successfully execute $cookieStore.put() within the $scope method without any issues. It appears that the issue lies with conflicting versions of the source files. Specifically, I was utilizing angular.js and angular-cookies.js version 1.3.11, but angular-route.js was at version 1.3.5.

To resolve this issue, I updated angular-route.js to version 1.3.11 to match the other dependencies or whatever version aligns with your setup.

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

Tips for creating a well-written piece of writing

sendoptions ={method : "PUT", credentials: 'same-origin', header :{"Content-Type":"application/json"}, body: JSON.stringify(Cookies.get("accessToken")} } body: JSON.stringify(Cookies.get("accessToken ...

Is it possible to duplicate the geometrical shape within the scene?

I'm currently experimenting with Three.js to recreate a flower as part of my learning process for transformations. Below is the code I used to generate the stamen, stem, and petals. My goal is to have multiple petals stemming from the same Petal mesh ...

Precautions when integrating three.js scenes into backbone.js models

Encountering issues while attempting to insert an instance of THREE.Scene into a Backbone.Model: var scene = new THREE.Scene(); new (Backbone.Model)(scene); This results in the following warnings: DEPRECATED: Object3D's .eulerOrder has been moved t ...

When displayed in a dialog, the active tab in AngularJS Bootstrap tabs does not appear properly

When I open my dialog box, I have multiple tabs displayed. When I choose tab_2 to be active, the content does not appear, which is quite unusual. <div class="portlet-body"> <div class="tabbable-blue" id="my_tabDialog& ...

Error message consistently pops up when using the jQuery search feature

My jQuery function is fetching data from a different domain, and I want to use AJAX to display that data when the user enters a value into the search box. However, no matter if I search by .productName or .itemCode, the app always gives me an error messa ...

Error: Trying to access the 'map' property of a null value, Using ReactJS with Axios

I'm currently developing a search bar feature where the user can input their query, hit the search button, and the request is stored in search. This request is then sent via Axios and the results are displayed at the end. Everything seems to be workin ...

Tips on implementing Angular Bootstrap within MVC5

Can someone help me troubleshoot an issue with using the "Tab" features created by Angular and Bootstrap? I have downloaded the latest scripts for Angular, Angular-UI Bootstrap, and linked the bootstrap.css file to my page. However, the output is not disp ...

Confusion arises when applying Angular filter to the numbers 1000, 100, and

I'm currently managing a database where a particular field can have values of 10, 100, or 1000. When filtering to display only the records with a value of "10," it also displays records with values of "100" and "1000." Is there an easy solution for th ...

dependency in useEffect hook not being properly updated

Currently, I am implementing an API call within the useEffect hook in the following manner: useEffect(() => { fetchPatientsStartAsync(patientListUrl); }, [patientListUrl]); Moreover, in my codebase I have two additional state variables and a method in ...

What is the best way to dynamically add getJSON's data to a div whenever the loadmore button is clicked?

When a page loads, my getJSON function displays its output in a div called myDiv. Now, I am looking to add a button at the bottom of the page. When the user clicks this button, I want to trigger another call to getJSON. Each time the button is clicked, I ...

Stopping the execution in JavaScript: Is there a way to do it?

Here is a link with embedded JavaScript code: <a style="padding: 5px;" onclick="confirmMessage(); $('contact_693_').show(); $('errors_693_').hide(); this.hide(); $('dont_693_').show();; return false;" id="the_link_693_" hr ...

Determining element visibility in React

Please refrain from flagging this as a duplicate. While it may be similar to other questions, I am specifically inquiring about the location to place the code, not how to write it. Here is the code I have and my goal is to determine which section is curre ...

Why Promise.all() isn't working as expected - where am I going wrong?

Currently, I am in the process of developing a script that utilizes the GitHub API. The script includes a function that takes a list of usernames as input. Each username triggers an API request to fetch that user's starred repositories. For each starr ...

What is the best way to import my json information into an HTML table and customize the rows as radio buttons using only Javascript?

I am facing an issue with processing a JSON response: var jsondata = dojo.fromJson(response); There is also a string that I am working with: var jsonString = jsondata.items; The variable jsonString represents the JSON data in the file: jsonString="[ ...

The issue with mediaDevices.getUserMedia not functioning properly in Safari 11 on iOS 11 persists, as the video output appears as a

I'm having trouble understanding why my code is not working. I've read that Safari 11 should be compatible with getUserMedia APIs from iOS 11, but for some reason it's not functioning as expected. My aim is to capture a QR code in a live str ...

Error: Attempting to access 'useState' property of null is not possible due to its absence

After searching through numerous resources like stack overflow and other websites, I have not found a solution to the issue I am facing. My goal is to create a custom fetch hook in TypeScript as shown below: import { useEffect, useState } from 'react& ...

Utilizing JQuery toggle feature to display extra content

Having some trouble with my JQuery toggle/collapse function. I added my own class "timelineEventWide" but it's not working as expected. As a JavaScript beginner, could someone please help me with the correct syntax? Thank you! e(".expandAll").toggle( ...

What is the best way to reveal a hidden section of an image contained within a div with a fixed height, using only CSS?

I have a container div that is 150x150 in size and contains an image that is 150x180 in size. The div has the CSS property overflow: hidden enabled, so part of the image is not visible. While the div size is fixed at 150x150, the height of the image may va ...

I am experiencing an issue where the Axios configuration does not display the OnUploadProgress on my response

I have been attempting to track the progress of file uploads from the front end, but I am encountering an issue where the onUploadProgress is not being received in the configuration catch. This problem arises as I am relatively new to using Axios. axios({ ...

Activating a text field using a checkbox with JavaScript

Could you please provide guidance on how to toggle the editability of a text box based on the selection in a combo box? For instance, if the combo box value is set to 1, the text box should be enabled; if it's set to 0, the text box should be disabled ...