Question

我有一个状态可以解析表示应用程序实际路径的通配符path。例如，url: '/{path:.*}' path为abc/def/。 path是以编程方式构建的。

如果我编码path，状态的控制器会按预期执行一次，但URL最终会带有编码路径（即，我看到mydomain.com/abc%252Fdef%252F而不是mydomain.com/abc/def/）。但是，如果我不对其进行编码，则控制器会运行两次。

为什么控制器会运行两次？我需要做些什么才能让abc/def/etc.../这样的路径在我的浏览器中显示未编码？

参见示例。如果未编码path，单击“开始”将更改状态，控制器将两次登录到控制台。

编辑：显然它是known issue with ui-router.建议的解决方法是按照我的提法对路径进行编码。

var app = angular.module('routerApp', ['ui.router']);

app.config(function($stateProvider) {
  $stateProvider
      .state('abc', {
          url: '/{path:.*}',
          controller: function() {
            console.log('loaded');
          }
      });
});

app.controller('MainCtrl', function($scope, $state) {
  $scope.go = function() {
    
    // loads once
    //var path = encodeURIComponent('one/two/three/four/');
    
    // loads twice
    var path = 'one/two/three/four/';
    
    $state.go('abc', {path: path});
  };
});

<html ng-app="routerApp">

  <head>
    <script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
    <script data-require="ui-router@*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button ng-click="go()">GO</button>
    <div class="container">
      <div ui-view>
      </div>
    </div>
  </body>

</html>

Answer 1

$ routeProvider不支持标准正则表达式，但确实如此支持命名组

Angular restriction

当通配符路径未编码时，控制器加载两次

1 个答案: