不改变位置的Angular路由

Angular routing without changing location

本文关键字：Angular 路由 位置 改变      更新时间：2023-09-26

Chrome打包应用程序有相当严格的内容安全策略。这样做的一个结果是操作位置(比如点击链接)会导致:

'Can't open same-window link to "chrome-extension://lkjasdfjklbdskjasdfjkhfdshjksad/derp.html"; try target="_blank". '

Target _blank将打开chrome中的链接，这不是我想要的。AngularJS的路由能在这样一个封闭的环境下工作吗?

他们的文档给出了一个Angular应用的例子，但明显没有使用路由。

这是链接，当点击时，给出错误:<a class='walrus-link' ng-href='paystubs/{{walrus.id}}'>Walrus {{id}}!</a>

不要使用href，而是尝试使用ng-click并调用控制器的方法，然后使用$location重新定位到适当的页面。参见AngularJS网站上的文档。以下引用的文档给出了$location服务可能适合您的指示:

什么时候应该使用$location?任何时候你的应用程序需要作出反应到当前URL的更改，或者如果您想更改当前的浏览器中的URL。

你的代码可能看起来像这样:

<a class='walrus-link' ng-click='getPaystub(walrus.id)'>Walrus {{id}}!</a>

，在你的父控制器中，你需要一个名为'getPaystub'的作用域方法，该行类似于:

$scope.getPaystub = function(selectedWalrusId) {
  $location.path('paystubs/'+$scope.walrus.id);
}

这样angular就能保持控制，不会导致页面刷新。这将使您保持在CSP的范围内。不幸的是，我不能在一个打包的应用程序中测试这一点，但我在一个web应用程序中使用了完全相同的约定，它工作得很好。

路由在我的chrome应用程序中工作时，不使用$routeProvider的html5模式(默认禁用)，你只需要在url中使用哈希。

所以我的链接是这样的:

<a href="#about">About</a>

$routeProvider配置如下:

$routeProvider.when('/about', {templateUrl:'about.html'})
相关文章：