AngularJS $location Redirect Error: Property 'path' Undefined

I'm struggling with an issue in my AngularJS code where I am trying to change the URL without reloading the page when a submit button is clicked. However, I keep getting a TypeError: Cannot read property 'path' of undefined in the console.

I have checked and double-checked for any missing $location injection but can't seem to find the mistake. What could be causing this problem?

var app = angular.module("SearchAPP", ['ngRoute']);

app.run(['$route', '$rootScope', '$location',
  function($route, $rootScope, $location) {
    var original = $location.path;
    $location.path = function(path, reload) {
      if (reload === false) {
        var lastRoute = $route.current;
        var un = $rootScope.$on('$locationChangeSuccess', function() {
          $route.current = lastRoute;
          un();
        });
      }
      return original.apply($location, [path]);
    };
  }
]);

app.controller('GetController', ['$http', '$scope', '$location',
  function($http, $scope, $rootScope, $location) {

    $scope.click = function() {

      var response = $http({
        url: 'http://localhost:4567/search',
        method: "GET",
        params: {
          keyword: $scope.searchKeyword
        }
      });

      response.success(function(data, status, headers, config) {
        $scope.searchResults1 = data;
        // $http.defaults.useXDomain = true;
        $location.path('/' + $scope.searchKeyword, false);
      });

      response.error(function(data, status, headers, config) {
        alert("Error.");
      });
    };
  }
]);

Answer №1

Incorrect order of dependencies in DI array, $rootScope is not included in the 3rd parameter of the array. Ensure that injected dependencies are used in the same order within the controller function.

//                                                  VVVVVVVV $rootscope was missing
app.controller('GetController', ['$http', '$scope', '$rootScope','$location',
  function($http, $scope, $rootScope, $location) {

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

Guide on automatically filling input text fields with database values when a checkbox is clicked

I need to automate the process of filling in multiple input text fields with values from variables retrieved through a SELECT query when a checkbox is clicked. For instance, if the SELECT query returns the Warehouse Street Address ($WarehouseStreetAddres ...

Tips for troubleshooting Angular bugs and errors

As I dive into learning Angular, I've encountered several vague errors in Chrome's console that are quite puzzling. Like the one shown in the screenshot below Any tips on how I can effectively diagnose and fix these issues? ...

Order of AngularJS Scope.on and Scope.emit Invocation in a Filter

One of the challenges I am facing involves watching a value in one controller that is changed in another controller within my filters. The goal is to determine whether an emit should be triggered based on the updated value. Here's the current situatio ...

Don't give up on the entire task just because one promise was rejected

To handle multiple promises in redux saga, you can use the all function (equivalent to Promise.all): yield all( users.map((user) => call(signUser, user)), ); function* signUser() { yield call(someApi); yield put(someSuccessAction); } An issue ...

Can you provide some straightforward instances of single-axis zooming using d3?

I'm interested in creating a single-axis zoom for d3's zoom behavior. Are there any straightforward examples that demonstrate how to achieve this? I came across Mike Bostock's example, but I found it a bit complex to grasp. Here is the code ...

Simply tap on the image to include it in the HTML5 Canvas drawing

Currently, I am in the process of drawing a circle onto my html5 canvas as shown in the code snippet below: <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> &l ...

retrieve all users who are not currently in the group

I'm currently struggling to retrieve all users who are not members of a particular group within a many-to-many association. After investing several hours into researching and experimenting, I've developed the following code. However, it falls sh ...

What could be the reason for the malfunction of jQuery's show() function?

Using jQuery, I have implemented a functionality to hide a div using the hide() method. However, upon clicking a link, the div is supposed to show but unexpectedly disappears after appearing briefly. HTML Code Snippet <div id="introContent"> & ...

What is the process for importing a class (.js file) into a .vue file?

I am facing an issue with my Vue application. I have created a class named `Authenticator` in the file `Authenticator.js`, and now I need to utilize its functions in my `Login.vue` file. Could someone guide me on how to properly export the `Authenticator` ...

Error message occurs when creating a pie chart with invalid values for the <path> element in Plottable/D3.js

For those who need the code snippets, you can find them for download here: index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <!-- CSS placement for legend and fold change --> </head> <body ...

In the world of node.js, functions almost always have a tendency to

As a beginner in the world of nodejs, I am diving into various guides and screencasts to grasp the basics. One aspect that has caught my attention is the handling of async/sync operations, reading files, and understanding how nodejs deals with callbacks/re ...

Stop the occurrence of OpenCPU javascript error pop-up notifications

I'm currently experiencing an error related to CORs during a test deployment of OpenCPU. While I may create a separate question for this issue in the future, for now, I am wondering if it is possible for the deployment to fail without alerting the end ...

Transforming a plain text field into an input field upon clicking a button or icon using Angular/Typescript

I am a beginner with Angular 6 and I'm trying to implement functionality where clicking a button or icon will change a text field into an input field. See the snippet of code and expected output below. Thank you in advance. <div> <mat-for ...

Ways to enable automatic scrolling of a page as the content expands (Utilizing collapsible elements)

For a recent project I've been working on, I decided to include 4 collapsible text boxes. However, I encountered an issue where opening content1 would expand and push down content2-4, requiring the user to manually scroll to view the remaining collaps ...

How can I create clickable table entries using php and html?

I want to create a table on this page that is clickable. When the user clicks on a row, the data from that row will be sent to a PHP file with a form prepopulated with the selected user's information for updating purposes. <!DOCTYPE html> &l ...

No content appearing on React screen

I initialized a fresh react project using "npx create-react-app name". After removing unnecessary files, the application no longer displays anything. I've encountered issues with react-router and defining routes as well. index.html: <!DOCTYPE html ...

Once the window width exceeds $(window).width(), the mouseenter function is triggered exponentially

My side menu smoothly folds to the right or left based on the size of the browser window. However, I noticed that upon first reload, the mouseenter and mouseleave events are triggered twice for each action. While this isn't a major issue, it becomes p ...

Embed a div element within a content-editable area

Is there a way to add a div with text to a contenteditable element and automatically select the text between the div tags after inserting the div? div.innerHTML +='<div id="id">selecttext</div>' I have tried this method, but it does ...

AngularJS - Regular Expression Error

I have implemented a RegEx pattern to validate passwords entered by users. The password must contain at least 1 capital letter, 1 number, and 1 symbol: /(?=.*?\d)(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[^a-zA-Z\d])/ When this RegEx is used with ng-patter ...

User controls in ASP.NET may not trigger the jQuery (document).ready() function

I wrote a jQuery function within my ASP.net user control that is not functioning as expected: <head> <title></title> <script src="~/Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script language="javascript" ty ...