AngularJS and BlackBerry 10 Webworks
AngularJS, and in particular, the ionic framework is a great way to develop Javascript apps, with best-practices baked in. It gives y0u two-way data-binding out of the box, and encourages you to separate logic and display, as well as keeping the global namespace clean. – So, I decided to give it a go, and develop an app using the ionic framework, which is based on AngularJS.
So, after getting it up and running on iOS and Android, after a few tweaks, my last platform was BlackBerry, and when firing it up on the simulator, I was disappointed to see that I couldn’t click on any of the links on the list; which was a simple rendering as follows:
<ion-list>
<ion-item ng-repeat=”item in data” type=”item-text-wrap” href=”#/tab/company/{{item.cacheId}}”>
{{item.title}}
</ion-item>
</ion-list>
Nothing special there, and there was no sign of the bug in Chrome, so I couldn’t debug it locally. I needed a way to debug it directly on the device. Then I remembered the remote web inspector. I’d heard of it, but never used it.
Firstly, to enable it, open the browser on the Z10 emulator, and press … => settings => developer tools => web inspector => ON. It shows a IP address, and port, you type this into any webkit browser on the same local network, and then select your application from the list.
When using bbwp to build your bar file, use the -d switch to enable remote web inspector.
You can then see console.log output, and run jquery commands against the UI. I ran the command $(“.item-content”) to see how AngularJS had rendered the list, and I saw the problem immediately. AngularJS had “sanitized” the URL links like so href=”unsafe:local://index.htm#…” which meant that they would be blocked. The solution I found to this, could be improved, but it worked for me:
setTimeout(function () {
console.log(“SearchResultCtrl – Desanitizing… BB10 requirement”);
$( “.item-content” ).each( function( index, element ){
$(this).attr(“href”,$(this).attr(“ng-href”));
});
}, 2000);
And, then when I re-built and deployed the app back on the z10 simulator, it worked like a charm.
In hindsight, perhaps in future, I’ll just wrap my android APKs to run on the BB10 devices, but for the moment, I’m still going to stick with Webworks.
A simpler way to handle this is to do something like:
angular.module(‘myApp’, [],function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|local):/);
})
Unfortunately, if the whitelist changes later, this will be out of sync, but, otherwise, it works really well.
Thank you for this, definitely helped me 🙂
Actually you could just whitelist all href by using
app.config([‘$routeProvider’,’$compileProvider’,function($routeProvider, $compileProvider){
$compileProvider.aHrefSanitizationWhitelist(‘./’);
Then your links will work in your app.
app.config([‘$compileProvider’, function($compileProvider){
$compileProvider.aHrefSanitizationWhitelist(‘./’);
$compileProvider.imgSrcSanitizationWhitelist(‘./’);
}]);
Worked for me! Big thx!!!