How to do navigation in a chrome packaged app using angular.js?

Question

I'm experimenting with chrome packaged apps, my first screen has a list of items, when i click on an item, a detail page should be visible.

I a normal web app you just do:

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

But in a packaged app i get the following error:

Can't open same-window link to "unsafe:chrome-extension://fsdjiojkljkljdfijkjkijkjkjijikf/index.html#/detail/blablabla"; try target="_blank".

So how do i do some kind of navigation in a chrome packaged app?

Thanks

Answer 1

As pointed by @romario333, see https://stackoverflow.com/a/15769779/122441 :

You need to explicitly add URL protocols to Angular's whitelist using a regular expression. Only http, https, ftp and mailto are enabled by default. Angular will prefix a non-whitelisted URL with unsafe: when using a protocol such as chrome-extension:.

A good place to whitelist the chrome-extension: protocol would be in your module's config block:

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

The same procedure also applies when you need to use protocols such as file: and tel:.

Please see the AngularJS $compileProvider API documentation for more info.