如何使用 angular.js 在 chrome 打包的应用程序中进行导航？

Question

我正在尝试chrome packaged apps，我的第一个屏幕有一个项目列表，当我点击一个项目时，应该可以看到一个详细信息页面。

我只是一个普通的网络应用程序：

<a href="#/detail/{{item.name}}">{{item.name}}</a>

但在打包的应用程序中，我收到以下错误：

无法打开相同窗口的链接 “不安全：chrome-extension://fsdjiojkljkljdfijkjkijkjkjijikf/index.html#/detail/blablabla”； 试试 target="_blank"。

那么我如何在 chrome 打包的应用程序中进行某种导航？

谢谢

Answer 1

由于 UI 美观的原因，chrome 打包应用程序中的导航功能被禁用（页面导航“感觉”不像一个应用程序）。见http://developer.chrome.com/apps/app_deprecated.html。

这里有一些导航的替代方法：

-打开一个新的应用窗口

-操作当前窗口的DOM

-使用 iframe、沙盒 iframe 或 webview 标记。有关一些文档，请参阅 http://developer.chrome.com/apps/app_external.html。

-使用 html 片段标识符/链接（我相信即使导航不起作用，这些仍然有效，但不是肯定的）

Answer 2

正如@romario333 所指出的，请参阅https://stackoverflow.com/a/15769779/122441：

您需要使用正则表达式将 URL 协议显式添加到 Angular 的白名单中。默认仅启用http、https、ftp 和mailto。当使用诸如chrome-extension: 之类的协议时，Angular 会在未列入白名单的 URL 前加上 unsafe:。

将chrome-extension: 协议列入白名单的好地方是在模块的配置块中：

var app = angular.module( 'myApp', [] )
.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
        // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
    }
]);

当您需要使用file: 和tel: 等协议时，同样的过程也适用。

请参阅 AngularJS $compileProvider API documentation 了解更多信息。