Question

我有一个angularJS应用程序，它使用服务在3个控制器之间共享数据。我使用html表单中的按钮在视图之间进行路由。表单的action属性设置为目标路由的URL。

在Firefox中似乎没有问题，但Chrome会在网址中插入问号，这似乎会重新启动应用程序并删除共享服务：

Firefox结果：

＆＃34; http：// localhost / myApp / app /＃/ thirdScreen＆＃34; （没问题）

Chrome结果：

＆＃34; http：// localhost / myApp / app /？＃/ thirdScreen＆＃34; （删除服务，应用程序似乎重启，共享服务数据丢失）。

然而，连续多次来回路由似乎解决了Chrome中剩余应用程序生命周期的问题。

问号是什么意思？
我是否必须在我的控制器中使用$ location服务来改变路线，还是有其他选择？

谢谢！

HTML

//Extract from the bottom of the secondScreen.html partial

<div class="col-md-12 column">
            <form action="#/thirdScreen">
                 <button type="submit" class="btn btn-lg btn-block btn-danger">
                              Go to third page 
                 </button>
             </form>
</div>

App.js

angular.module('myApp', [
  'myApp.services',
  'myApp.directives',
  'myApp.controllers',
  'myApp.filters',
  'ngRoute'
]).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.
        when("/firstScreen", {templateUrl: "partials/firstScreen.html", controller: 'firstScreenController'}).
        when("/secondScreen", {templateUrl: "partials/secondScreen.html", controller:"secondScreenController"}).
    when("/thirdScreen", {templateUrl: "partials/thirdScreen.html", controller:"thirdScreenController"}).
otherwise({redirectTo: '/firstScreen'});
}]);

Controllers.js

controller('secondScreenController', function($scope, $http, sessionDetailsService, modalService, goodsCheckedInFetchingService) {

    $scope.session = sessionDetailsService;

}).

controller('thirdScreenController', function($scope, $http, sessionDetailsService, modalService, goodsCheckedInFetchingService) {

    $scope.session = sessionDetailsService;

}).

Answer 1

我认为您已在代码中设置$locationProvider.hashPrefix('?')，如下所示：

angular.module('myApp', ['ngRoute'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('?');
}]);

从您的代码中删除此$locationProvider.hashPrefix('?');。

或者您尚未设置此项，然后将此代码放入app.js：

angular.module('myApp', ['ngRoute'])
    .config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(false);
    $locationProvider.hashPrefix('');
    }]);

在Chrome中使用HTML表单操作更改路径（AngularJS）

1 个答案: