angular issue encountered when trying to redirect utilizing $window.location.href

I've been working on redirecting to another page in angular after submitting data to an API, and here's the code I used:

$scope.Proceed = function () {
            DataService.InsertPerson($scope.p)
            .then(function success(data) {
                $scope.p.ID = data.data;
                var url = "http://" + $window.location.host + "/#/show/person/";
                $window.location.href =  url + data.data; //adding ID to url
            });
        };

The page redirected successfully, but Angular threw an error:

Error: $rootScope:infdig Infinite $digest Loop

I also tried using $location but encountered the same issue.

Thank you for your time!

javascriptangularjs

Answer №1

Instead of utilizing $window.location.href for redirection, you have the option to leverage AngularJS $location to modify the URL and append it to the history stack:

$location.url('/show/person/' +  data.data);

Alternatively:

$location.path('/show/person/' +  data.data);

Both approaches serve as getter / setter functions:

  • $location.url retrieves the entire URL following the slash, encompassing search string parameters, path modifications, search criteria, and hash. It returns $location when invoked with a parameter.
  • $location.path fetches the segment of the URL beyond the slash without incorporating search string parameters or path changes. It returns $location when called with a parameter.

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

Waiting for a method to finish in Node.js/Javascript

Currently, I am in the process of creating a trade bot for Steam. However, I have encountered an issue where the for-loop does not wait for the method inside it to finish before moving on to the next iteration. As a result, the code is not functioning as i ...

javascriptnode.jsfor-loopmethodswait

Navigating inside an SVG element with the g-tag

<svg> <g id="SA1A"> <rect id="berthbg-1" data-name="berthbg-1" className="cls-24" x="615.48" y="369.06" width="22.77" height="18" transform="translate ...

javascriptreactjssvgscrollgtag.js

Limiting the input in a text box to only allow whole numbers and no decimal values

What is the best way to limit a textbox to only accept whole numbers and exclude decimal values and alphabets? ...

javascriptjqueryhtml

Enhance user experience by turning the entire card into a clickable element through targeting the <a> tag nested

I need to make the entire card clickable to go to a specific link, but I can't wrap the card with an anchor tag. Is there a way to target the anchor tag within the card and trigger it when the user clicks anywhere on the card using jquery? Desired ou ...

javascripthtmljquery

I am puzzled as to why the post API body is not appearing in the multer request body in my Node.js code

My server is built on node.js and includes an addProduct API that receives objects and image files. In my api.route.js file, I handle this as follows: import { Router } from "express"; import { log, loggedIn } from "./middlewares/index"; import { addProd ...

javascriptnode.jsexpress

Utilizing a shared component in both a child and parent within a Vue application

I am currently working on a VueJS project, where I have parent and child components within one view. Both components are using the same component called deleteModal. The issue arises when I try to trigger the modal from the child component - it ends up tr ...

javascriptvue.jsvuejs2vue-component

Display information stored in Firebase using AngularJS

I am utilizing AngularJS and Firebase to create a To-Do list. My tasks are divided into 3 priority levels (high, medium, low), and I want to display them in 3 separate columns based on their priority level. As I dive into learning Angular with Firebase, ...

angularjsangularjs-scopefirebase

Error message: "An unfamiliar service found in the testing scenario for Angular using ES6 modules

I need to create a karma-jasmine test case for a controller (-> class AddUserController @$inject = ['$scope', '$http', '$state', 'UserFactory'] constructor: (@$scope, @$http, @$state, UserFactory) -> ...

angularjsunit-testingkarma-jasmine

Custom filtering in jqGrid with an integrated filtering toolbar

Hey there! I'm currently using the latest version of jqGrid and I was curious if it's possible to implement local filtering with custom rules. In the past, I had to manually add this feature because the version I was using didn't support it. ...

javascriptjqueryjqgrid

Struggling to locate images in Three.js

I'm facing a challenge with my Vue Cli app where I am attempting to use Three.js for rendering 3D objects within it. The issue arises when I attempt to load an image to utilize as a texture. let scene = new Three.Scene(); const spaceTexture = new Th ...

javascriptvue.jsthree.js

Unable to locate rollup using Yarn?

I'm facing an issue while attempting to construct lumo (a Clojurescript REPL) from source within a Debian chroot environment. The error I encounter is as follows: Building production bundle... Circular dependency: src/js/cljs.js -> src/js/repl.js ...

javascriptnpmclojurescriptyarnpkg

Exploring Rotation Challenges in Photogrammetry Reference Cameras within a Three-Dimensional Environment Using THREE.JS and Reality Capture

Greetings to everyone who has taken the time to read through my post. I am hopeful that not only will this post be beneficial for me, but also for others who may come across it! A Brief Overview Currently, my focus is on a project involving point clouds c ...

javascripttypescriptthree.jspoint-cloudsphotogrammetry

Modifying the location of an SVG path by adjusting its X and Y coordinates

Is it possible to retrieve and modify the X and Y coordinates of a path using jQuery? I am interested in animating my icon when clicked, and while there are alternative methods, I prefer to utilize jQuery for this task. <svg class="path" style="heigh ...

javascriptjqueryhtmlsvg

Utilizing the .ajax method to upload a file and submit text input to a PHP server resulted in displaying an error message

As a beginner, I have a simple question that has been bothering me. I am having trouble handling the data and need some expert advice. My goal is to upload a file and input an email from the user, send it to upload.php, receive a reference ID in return, a ...

javascriptphpjqueryajaxfile-upload

The d3 drag functionality is only active when the axis ticks are selected

Currently, I am developing a unique package that combines Angular and D3 (v3) and my main focus is on integrating D3's dragging feature into the package. Although I am very close to achieving success, there is a minor bug that I need to address. When ...

javascriptangularjsd3.js

Remove the style using tags and JavaScript

How do I remove the style attribute from an img tag? <div id='someID'> <p> <img style="width: 585px;" src="somesrc"> </p> </div> Delete the style attribute only using JavaScript and by tag. <div ...

javascriptjqueryhtml

Storing JSON data in a SQL database

Storing JSON in an MsSql database and passing it to Javascript via a PHP script has been working perfectly. However, when trying to include extra text that is not part of the formatting string, like d, h, a, or p characters, encountered some challenges. Lu ...

javascriptphpjquerysql-serverjson

Maintain the newly selected background color for the current day in fullcalendar when navigating to the next or previous month

Currently, I am working on a project in React using npm fullcalendar. One of the requirements is to change the color of the current day. After some trial and error, I was able to achieve this by adding the following code: $('.fc-today').attr(&ap ...

javascriptjqueryreactjsfullcalendar

JavaScript - Shuffle Cards Memory Game Function

I've been working on developing a memory game using JavaScript, and I've encountered some challenges along the way. After successfully designing the HTML and CSS components, my focus has now shifted to implementing the JavaScript functionality. O ...

javascriptjqueryhtmlcss

The onchange functionality is not functioning as expected

I've added an onchange event to the select box, but it doesn't seem to be working. Any suggestions would be greatly appreciated. Thank you in advance. HTML [<select id="notifyBy" ng-change="selectchange()" style="border:none" class="formtex ...

javascriptangularjsionic-framework