Searching for a location path with parameters does not lead to navigation to the next page

Question

Searching for a location path with parameters does not lead to navigation to the next page

I am trying to pass a parameter to the next page (edit page) by clicking on an edit button. The code I have tried is not working as expected. When I click on the button, the URL is displayed correctly but the page shows up blank and the controller does not load. Can you help me identify what is causing this issue?

http://localhost:8080/#/group/edit?id=586351373b6bba91152ab744

View

<md-button class="md-raised md-primary" ng-click="doEdit(item._id)" title="Edit">Edit</md-button>

Route

$routeProvider.when('/group/edit', {
      templateUrl: 'template/group_edit.html',
      controller: 'GroupEditCtrl'
})

Controller

$scope.doEdit = function (id) {
    $location.path('/group/edit').search({id: id});
}

javascript angularjs

Answer 1

Answer №1

It might be beneficial to include more code to pinpoint the issue, as this basic snippet appears to be functioning correctly.

angular.module('MyApp', ['ngMaterial', 'ngRoute']);

angular
  .module('MyApp')
  .config(['$routeProvider', setupRoutes])
  .controller('ViewController', ['$scope', '$location', ViewController])
  .controller('GroupEditController', ['$scope', '$location', GroupEditController]);

function setupRoutes($routeProvider) {
  $routeProvider.
        when("/view", { controller: "ViewController", templateUrl: "view.html" });
  $routeProvider.when('/group/edit', {
      templateUrl: 'edit.html',
      controller: 'GroupEditController'
  })
}

function ViewController($scope, $location) {
  $scope.item = {_id: 123}
  $scope.doEdit = function (id) {
    $location.path('/group/edit').search({id: id});
  }
}

function GroupEditController($scope, $location) {
  $scope.locationParam = $location.search().id
  $scope.goBack = function() {
    $location.path('/');
    }
}

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  
</head>
<body ng-app="MyApp" ng-cloak>
  
  <ng-view></ng-view>
 
  <script type="text/ng-template" id="view.html">
    <md-button class="md-raised md-primary" ng-click="doEdit(item._id)" title="Edit">Edit</md-button>
</script>
  
  <script type="text/ng-template" id="edit.html">
    hey edit! ID: <pre>{{locationParam | json}}</pre> <br/>
    <md-button class="md-raised md-primary" ng-click="goBack()" title="Back">Back</md-button>
</script>
  
  
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  
  
  
</body>
</html>

Answer 2

It might be beneficial to include more code to pinpoint the issue, as this basic snippet appears to be functioning correctly.

angular.module('MyApp', ['ngMaterial', 'ngRoute']);

angular
  .module('MyApp')
  .config(['$routeProvider', setupRoutes])
  .controller('ViewController', ['$scope', '$location', ViewController])
  .controller('GroupEditController', ['$scope', '$location', GroupEditController]);

function setupRoutes($routeProvider) {
  $routeProvider.
        when("/view", { controller: "ViewController", templateUrl: "view.html" });
  $routeProvider.when('/group/edit', {
      templateUrl: 'edit.html',
      controller: 'GroupEditController'
  })
}

function ViewController($scope, $location) {
  $scope.item = {_id: 123}
  $scope.doEdit = function (id) {
    $location.path('/group/edit').search({id: id});
  }
}

function GroupEditController($scope, $location) {
  $scope.locationParam = $location.search().id
  $scope.goBack = function() {
    $location.path('/');
    }
}

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  
</head>
<body ng-app="MyApp" ng-cloak>
  
  <ng-view></ng-view>
 
  <script type="text/ng-template" id="view.html">
    <md-button class="md-raised md-primary" ng-click="doEdit(item._id)" title="Edit">Edit</md-button>
</script>
  
  <script type="text/ng-template" id="edit.html">
    hey edit! ID: <pre>{{locationParam | json}}</pre> <br/>
    <md-button class="md-raised md-primary" ng-click="goBack()" title="Back">Back</md-button>
</script>
  
  
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  
  
  
</body>
</html>

Searching for a location path with parameters does not lead to navigation to the next page

Answer №1

Similar questions

Issues with cross-browser compatibility are arising in my jQuery code

Integrate a @Component from Angular 2 into the Document Object Model of another component

Tips for incorporating a multiple tag search feature within my image collection using JavaScript?

Including a personalized User-Agent string in my headers for fetch requests

Error encountered when trying to import Typescript file using a relative path

Styling the background of the endAdornment in a material-ui textfield using React

External function does not support jQuery types

Encountered a Uncaught TypeError: Attempted to clear a canvas when the property 'getContext' is undefined or null

What is the best way to establish a global database connection in express 4 router using express.Router()?

Utilizing Fullcalendar to Show Multiple Months

When you press the back button and navigate to a different page, the scroll position will remain unchanged

Using Javascript to determine if a DropDown list is currently disabled

Tips for creating a Carousel with more than three images using Bootstrap

Updating bindings in AngularJS from promisesIn AngularJS, promises do not automatically update

Attempting to locate an element within the DOM using TypeScript

I want to know how to keep additional inline whitespace while using the default JS/TS formatter in VS Code

Click event handling in child components with Vue 2

Updating Information Using JQuery

Guide to accessing object items in v-for in VueJs

JavaScript function for exporting HTML table to Excel with the ability to choose the file name