In my app I have a directive inside a repeater, and the directive displays the URLs to the users.
The code I have is the following:
var onDeviceReady;
onDeviceReady = function() {
console.log("this was called");
return window.open = cordova.InAppBrowser.open;
};
document.addEventListener('deviceready', onDeviceReady, false);
and in the html
<a href="#" on-click="window.open('{{data.url}}', '_blank', 'location=yes');">{{data.url}}</a>
When i try to open the app on the android device, the console message is printed properly (meaning that the function should be called) but all the url is not opening at all.
My index file looks like this (in case is useful):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy"
content="default-src * gap://ready file: data:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: https://fonts.gstatic.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">
<title></title>
<link href="css/bower.css" rel="stylesheet" id="bower-css">
<link href="css/style.css" rel="stylesheet" id="style-css">
</head>
<body ng-app="myApp" ng-strict-di>
<ion-nav-view class="slide-left-right" animation="slide-left-right"></ion-nav-view>
<script src="js/bower.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/templates.js"></script>
</body>
</html>
And the plugins i currently have installed are the following:
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-whitelist 1.3.2 "Whitelist"
I finally managed to get it working at the end.
Basically, I replaced
ng-click="window.open('{{data.url}}', '_blank', 'location=yes');">
with a function:
ng-click="openRUL({{data.url}})">
and then the function looks like this:
$scope.openURL = function (url){
window.open(url, '_blank', 'location=yes')
}
and it's working perfectly fine now.