6

I'm trying to create a HTML5/JS/CSS3 App with angularJS on Windows 8.1 with visual studio 2012. I'm currently stuck on sending over parameters to other views.

When googleing I see several examples using <a href="#/page/{{:pageId}}">link</a> When I do this in my Windows 8 application and clicking on the link I am getting the following error.

No Apps are installed to open this type of link (unsafe)

When I put the {{:pageId}} code between the A tags it shows its ID.

app.js

var myApp = angular.module('myApp', ['ngRoute', 'ngResource']);

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when("/", { templateUrl: "views/home.html" })
        .when("/page/:pageId", { templateUrl: "views/page.html" })
        .otherwise({ redirectTo: "/" });
}]);

What is a solution to solve this problem?

--update--

I have done some more debugging. In the browser it's all working fine. In visual studio I have found the following:

<a class="ng-binding" href="unsafe:ms-appx://3595d292-0235-47cd-8db7-cb3019f29114/www/index.html#/page/1" data-ng-href="#/page/1">Select</a>

Looks like VS is adding some code. In the source I haven't include the href item

I have changed the link and all seems fine, also the correct variable is loaded only VS keeps adding 'unsafe:' at the frond of the link.

Rik
  • 513
  • 2
  • 9
  • The `{{:pageId}}` binding will be looking for a property called `pageId` on your controller's `$scope` object. Do you have that property in your controller? If not, when Angular evaluates the `{{:pageId}}` expression, it will find out that pageId is undefined and will change your link to `href="#/page/"`, which you don't have a route defined for that... – tennisgent Oct 25 '13 at 13:41
  • What is the url in your browser? Is it file:// or http://? – HMR Oct 25 '13 at 13:59
  • Sorry for the late comment. Because it's all HTML5 and JS I tested it in the browser and there it works perfect. – Rik Oct 28 '13 at 16:23

1 Answers1

11

Problem solved!

seems like the ms-appx that is being added by ms causes the problem. This is being resolved by addeing this following code.

AngularJS 1.2

app.config(['$compileProvider', function($compileProvider) {
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ms-appx):/);
}]);

For 1.1.x and 1.0.x, use urlSanitizationWhitelist.

If you use PhoneGap, remember to add file besides https?, otherwise, links will not work.

Rik
  • 513
  • 2
  • 9