Why is pushState disrupted when using ng-include?

Question

Why is pushState disrupted when using ng-include?

75 views Asked by mjavad sh lan At 09 October 2019 at 04:23

When using ng-include, the pushState function is disrupted.

The following is a simple example of this.

<div ng-app="angularApp" ng-controller="angularCtrl">
    <div ng-include="templateUrl"></div>
    <button ng-click="bye()">BYE</button>
</div>

and

let app = angular.module('angularApp', []);
app.controller('angularCtrl', async function ($scope) {
    $scope.templateUrl = '/assets/hi.html';
    $scope.bye = function () {
        $scope.templateUrl = '/assets/bye.html';
        history.pushState({},'','/finish.html')
    };
});

We want to change the body value after pressing the BYE button using ng-include and also change the page address by pushState. This example is part of a larger project that has been simplified here as much as possible.

Note: According to the reviews, the url is changed by pushState but immediately returns its value. It is ignored during the ng-include process.

Original Q&A

There are 1 answers

**Pete BD** · Answer 1 · 2019-10-14T11:49:50+00:00

Changing the browser location is inherently tricky in AngularJS. It is best to try to use the $location service as much as possible as this understands and works with the $scope digest machinery better.

Try using the following in your app:

let app = angular.module('angularApp', []);
app.config(function ($locationProvider) {
  $locationProvider.html5Mode(true);
});

app.controller('angularCtrl', function ($scope, $timeout, $location) {
    $scope.templateUrl = '/assets/hi.html';
    $scope.bye = function () {
        $scope.templateUrl = '/assets/bye.html';
        $location.url('/finish.html');
    };
});

Note that you will need to provide a base[href] for html5 mode support:

<html lang="en">
<head>
  ...
  <base href="/">
</head>
<body>
  <div ng-app="angularApp" ng-controller="angularCtrl">
    <div ng-include="templateUrl"></div>
    <button ng-click="bye()">BYE</button>
  </div>
</body>
</html>

TechQA.

Why is pushState disrupted when using ng-include?

There are 1 answers

Related Questions in ANGULARJS

Related Questions in PUSHSTATE

Related Questions in ANGULARJS-NG-INCLUDE

Popular Questions

Popular Tags

Trending Questions