AngularJS query string value not updating

Question

I've noticed a behavior with an angular js application that I've got that I'm trying to fix. The app is using AngularJS 1.6, and I'm able to reproduce this behavior using just html and AngularJS.

Here's my index.html file:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/angular.min.1.6.js"></script>
</head>
<body ng-controller="mainCtrl">
<span>Number:</span><br/>
<span>{{ inputNumber }}</span><br/>
<script type="text/javascript" src="js/application.js"></script>
</body>
</html>

Here's my application.js AngularJS controller file:

(function() {
var app = angular.module("myApp", []);
app.controller("mainCtrl", function ($scope, $http, $location) {
    $scope.inputNumber = "";
    if ( $location.search().hasOwnProperty( 'number' ) ) {
        $scope.inputNumber = $location.search()['number'];
    }
});
})();

I've got these two files on my windows workstation desktop in a folder called 'angular app'. I am using the following url to open the index.html file:

file:///C:/Users/myuserid/Desktop/angular%20app/index.html#!/?number=12345

The page that appears is displaying:

Number: 12345

The weird behavior that I'm encountering happens when I change the value assigned to the query string variable 'number':

file:///C:/Users/myuserid/Desktop/angular%20app/index.html#!/?number=56789

After I change the number and click enter, I'm expecting the page to display this:

Number: 56789

But instead it's still displaying this:

Number: 12345

If I click in the address bar, without changing anything, and click enter again, it finally does change to this:

Number: 56789

Why is it that the page doesn't update the first time when I change the value and click enter? Is there anything I can do to fix this?

Using ng-route instead of getting data from the query string may solve your parameter problem. — bgul
– bgul, Commented Sep 9, 2019 at 14:21

hoeni · Accepted Answer · 2019-09-09 15:02:45Z

1

The code for reading the number from the url is executed only once, when the controller is initialized.

As the main URL does not change, there is no need to reinitialize the controller, so it does not read again from the url. When you press return in the URL bar of your browser, the page is reloaded and so the controller is initialized again, reading your number from the url.

The best solution would be to either use the angular router (or better ui-router) to define a route with a number parameter.

If that is not an option, you could still register (low level) in the browser for URL changes (hashchange event on window) and react on that.

answered Sep 9, 2019 at 15:02

hoeni

3,34035 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stephen · Accepted Answer · 2019-09-09 19:53:58Z

Using AngularJS routing did the trick for me. I used the following url as a guide to help me implement the solution: https://www.guru99.com/angularjs-routes.html

I did find that the version of the angular routing js file needed to match the version of the normal angular js file.

My index.html file now looks like this:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/angular.1.6.5.min.js"></script>
<script type="text/javascript" src="js/angular-route.1.6.5.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<!-- Angular routing template replaces "div ng-view" tags here -->
<div ng-view></div>
<script type="text/javascript" src="js/application.js"></script>
</body>
</html>

Notice that I'm using angular.1.6.5.min.js and angular-route.1.6.5.min.js.

I have introduced a second html page that actually displays my content: numberpage.html. The contents of this file look like this:

My Number:
number = {{ inputNumber }} <br/>

My application.js file now looks like this:

(function() {
var app = angular.module("myApp", ['ngRoute']);
app.config(
   function($routeProvider){
        $routeProvider.
        when('/number/:myNumber',{
            templateUrl : 'numberpage.html',
            controller: 'trackCtrl'
        })
});
app.controller("mainCtrl", function ($scope, $routeParams) {
    console.log("mainCtrl controller: begin.");
});
app.controller("trackCtrl", function ($scope, $routeParams) {
    console.log("trackCtrl controller: begin.");
    $scope.inputNumber = $routeParams.myNumber;
    console.log("trackCtrl controller: number = " + $scope.inputNumber);
});
})();

My url now looks like this:

file:///C:/Users/myuserid/Desktop/angular%20app/index.html#/number/12345

I hope this helps someone else!

Collectives™ on Stack Overflow

AngularJS query string value not updating

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related