What I am doing: In my angular app, when the user clicks on a link, I am fetching the URL from the backend and launching with $window.open().
The problem: The Safari popup blocker is blocking $window.open(). If I do $window.open() outside of the success callback of the service call and in the controller, it works well. How do I get this working in the service success callback?
Plunker: http://plnkr.co/edit/aI4rvJJhP2XC5Mk1nK3t?p=preview
Code (relevant part):
index.html:
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<a href="javascript:;" ng-click="openLink()" target="_blank">Open Link</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
</body>
app.js:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', 'sampleService', '$window', '$log', function($scope, sampleService, $window, $log) {
$scope.openLink = function() {
// call the service
sampleService.getURL().then(function(response) {
$log.info('service response', response); // just checking the response
$window.open(response, '_blank'); // this does not work! :(
}, function(error) {
$log.info('ERROR: ', error);
});
// $window.open('https://www.google.com', '_blank'); // works if placed here!
};
}]);
myApp.service('sampleService', ['$q', function($q) {
this.getURL = function() {
return $q(function(resolve, reject) {
setTimeout(function() {
resolve('https://www.google.com'); // static URL, for now
}, 2000); // send it back in 2 sec.
});
};
}]);
How do I fix this?
