Angular page refresh on changing URL parameter in browser

问题

Extremely simple requirement but having a hard time with this. Have simple page where I print the parameter in the url path.

http://localhost:8888/ngtest.html#/1234567

ngtest.html

<div ng-app="app" ng-controller="testCtrl">
    {{myId}}
</div>

<script>
var app = angular.module('app', []);
app.controller('testCtrl', function($scope, $location) {
    $scope.myId = $location.$$path;
});
</script>

In the browser window:

change 1234567 to something like 1234
hit Enter

Nothing happens. Hit F5 and it works as expected.

Not sure if this has something to do with browser behavior but how to force the page to refresh after parameter change + Enter?

回答1:

Page refresh has been answered here.

You can use $route.reload();

As suggested here, you can try listening for route change success when hitting Enter in the url input:

scope.$on('$routeChangeSuccess') or scope.$on('$locationChangeSuccess').

回答2:

Complete example based on Leon's suggestion above

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>

<div ng-app="app" ng-controller="testCtrl">
    {{myId}}
</div>

<script>
var app = angular.module('app', []);
app.controller('testCtrl', function($scope, $location) {

    // add a listener for when the url changes and user
    // Enter in the address bar
    $scope.$on('$locationChangeStart', function(event) {
        $scope.myId = $location.$$path;
    }); 
});
</script>

Basically location this is registering a location change listener and doing things accordingly. No routing config required

来源：https://stackoverflow.com/questions/30312107/angular-page-refresh-on-changing-url-parameter-in-browser

标签

javascript

angularjs

browser