CODEWITHSUNDEEP
angularjsroutesurl-routing
Stephen
Stephen

Reputation: 2177

AngularJS query string value not updating

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?

Upvotes: 1

Views: 118

Answers (2)

Stephen
Stephen

Reputation: 2177

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!

Upvotes: 0

hoeni
hoeni

Reputation: 3280

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.

Upvotes: 1

Related Questions