ng-href when populating list of links in Chrome extension

Question

I'm working on a Chrome extension with Angular and I'm trying to use ng-repeat to create a list of links. Works great except I'm having issues populating the links' href attribute:

<ul>
    <li ng-repeat="item in menu" class="ng-scope">
        <a ng-href="#/new" href="unsafe:chrome-extension://ehklbggiaofbhgcghgnmejkpgommihdl/popup.html#/new">Add Link</a>
    </li>
    <li ng-repeat="item in menu" class="ng-scope">
        <a ng-href="#/bookmarks" href="unsafe:chrome-extension://ehklbggiaofbhgcghgnmejkpgommihdl/popup.html#/bookmarks">My Bookmarks</a>
    </li>
</ul>

How do I prevent the unsafe:chrome-extension stuff from being inserted? Note: I have ng-csp set on the root of my app.

Answer 1

I also face the same issue now. Have not found any solution. Please check this link: https://groups.google.com/forum/?fromgroups=#!topic/angular/YiP02I1wkNU.

Follow this, check the app.js on http://plnkr.co/edit/prTGFiheFI7GXNoDhoGT?p=preview

Code like:

var app = angular.module('angularjs-starter', []);

app.config(function($compileProvider){ $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|chrome-extension):/); });

It works for me.