Почему pushState прерывается при использовании ng-include? - PullRequest
Новая
       31

Почему pushState прерывается при использовании ng-include?

0 голосов
/ 09 октября 2019

При использовании ng-include функция pushState нарушается.

Ниже приведен простой пример этого. 

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

и 

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')
    };
});

Мы хотим изменить значение тела после нажатия кнопки BYE с помощью ng-include, а также изменить адрес страницы на pushState. Этот пример является частью более крупного проекта, который здесь максимально упрощен.

Примечание: Согласно обзорам, URL-адрес изменяется pushState, но сразу же возвращает его значение. Он игнорируется во время процесса ng-include.

1 Ответ

0 голосов
/ 14 октября 2019

Изменение местоположения браузера по своей сути сложно в AngularJS. Лучше всего стараться использовать сервис $location настолько, насколько это возможно, поскольку это лучше понимает и работает с $scope механизмом дайджеста.

Попробуйте использовать в своем приложении следующее: 

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');
    };
});

Обратите внимание, что вам нужно будет предоставить base[href] для поддержки режима html5: 

<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>
...