Question

我尝试创建匹配/:url

的路线http://localhost/#/http://www.google.com

我希望通过

获取控制器中的url param

var url = $stateParams.url; // url = http://www.google.com

有没有办法实现那个场景？请建议，谢谢。

Answer 1

在网址中传递带编码的斜杠非常困难，因为浏览器会将其更改为斜杠。我想出的唯一解决方案是对斜杠进行双重编码。我使用this encoder进行编码，但如果需要，可以使用encodeURIComponent在角度应用中完成。这意味着网址是#/http%3A%252F%252Fwww.google.com。

要设置参数，首先必须将其添加到app.js中的路由配置中。我添加了名为url的参数，并使用?符号将其设为可选：

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/:url?', {
        templateUrl: 'view.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
});

然后在您的控制器中，您可以使用$routeParams来获取网址。但由于斜杠是双重编码的，因此您需要使用decodeURIComponent来解码网址：

app.controller('MainCtrl', function($scope, $routeParams) {
  $scope.url = decodeURIComponent($routeParams.url);
})

点击演示文稿中针对google网址的a链接。

Demo

用于url的Angularjs正则表达式路由

1 个答案: