Allowing ng-click to launch a webpage in a new browser tab

I am struggling to open a valid URL generated by ng-click in a browser window, as it triggers my 3rd party app.

I have tried various options and found some additional button solutions (2-6) on Stack Overflow and Google, but I need help with making it open in a browser.

Here is an image of the app showing the console output when clicking on the full-width button and the code in a Plunker:

View Image

View Code in Plunker

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {

if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab' : {
templateUrl: 'templates/home.html'
}
}
})
.state('tabs.list', {
url: '/list',
views: {
'list-tab' : {
templateUrl: 'templates/list.html',
controller: 'ListController'
}
}
})
.state('tabs.detail', {
url: '/list/:aId',
views: {
'list-tab' : {
templateUrl: 'templates/detail.html',
controller: 'ListController'
}
}
})

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/home');

})

.controller('ListController', ['$scope', '$http', '$state','$cordovaBluetoothSerial', '$location', function($scope, $http, $state, $cordovaBluetoothSerial, $location) {
$http.get('js/aboDATAONLY.json').success(function(data) {
$scope.orders = data;
$scope.whichorder = $state.params.aId;
})

function onPay() {
var itemsArr = [];
var invoice = {};
var myItems = {};
var myItem = {};

myItem['name'] = "Sphero";
myItem['description'] = "A robotic ball that can be controlled via apps";
myItem['quantity'] = "1.0";
myItem['unitPrice'] = "129.00";
myItem['taxRate'] = '0.0';
myItem['taxName'] = 'Tax';
itemsArr.push(myItem);
myItems['item'] = itemsArr;

invoice['itemList'] = myItems;
invoice['paymentTerms'] = 'DueOnReceipt';
invoice['currencyCode'] = 'GBP';
invoice['discountPercent'] = '0';
invoice['merchantEmail'] = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f994809c94989095b994989095d79a9694">[email protected]</a>';
invoice['payerEmail'] = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89efe6e6c9ebe8fba7eae6e4">[email protected]</a>';

var returnUrl = 'http://wp1175175.wp220.webpack.hosteurope.de/speedhack/index.html';
var retUrl = encodeURIComponent(returnUrl + "?{result}?Type={Type}&InvoiceId={InvoiceId}&Tip={Tip}&Email={Email}&TxId={TxId}");
var pphereUrl = "paypalhere://takePayment/v2?returnUrl=" + retUrl;
//var pphereUrl = "paypalhere://takePayment/?";
pphereUrl = pphereUrl + "&accepted=cash,card,paypal";
pphereUrl = pphereUrl + "&step=choosePayment";
pphereUrl = pphereUrl + '&invoice=' + escape(JSON.stringify(invoice));
console.log(pphereUrl);

return pphereUrl;
}

$scope.pay = function () {  
window.location = onPay();
};

}]);

Answer №1

test it out with

let website = getLink();
    window.open(website , '_blank');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for sending a JSON array from a controller to JavaScript using AJAX in a view file

I've been struggling to send an array of Document objects from a method (let's say it's in a controller) to the JavaScript function where the method is being called (in a view). Oddly enough, the method refuses to pass the array - it only wo ...

What is the process for utilizing node modules within the Alexa Developer Console?

Struggling with creating an Alexa skill that utilizes a Node.JS API with a module requiring npm installation? Unable to upload the node modules due to the absence of an upload button and console for npm install? Seeking guidance on how to proceed? ...

What is the process of importing the csv-writer module?

Can we use the import statement instead of const createCSVWriter = require('csv-writer').createObjectCsvWriter; Is there a way to achieve this using import ...

What causes certain object methods to not display in a console log?

While incorporating leaflet into my AngularJS project using a plugin, I noticed that some methods were missing from the injected leaflet object. However, when I attempted to use those methods anyway, they surprisingly worked. What determines which propert ...

Leveraging the 'window' object as a dependency in the useEffect hook within NextJS

I'm encountering an issue where I need a function to run when the type of window.performance.getEntriesByType("navigation")[0].type changes. I attempted to use useEffect for this purpose, but it resulted in a 'window is not defined&apos ...

Struggling with a minor glitch in a straightforward coin toss program written in JavaScript

I'm a newcomer to JavaScript programming and I am struggling with understanding how the execution flow is managed. I attempted to integrate an animation from "Animation.css" into a coin toss program, but encountered an issue. When trying to use JavaSc ...

Performing a `contains` operation with JQuery on this variable or object

Help! I'm completely confused about this problem. First, I am trying to use jQuery to select an li object and then check if a certain text exists within it using the "contains" function. However, for some reason, the line with the "contains" function ...

What is the best way to create a directive that replaces not only the contents of a DIV but also the DIV itself

Below is the directive call that I am currently using: <div data-my-activity></div> This is how the directive looks in my code: app.directive('myActivity', function () { return { restrict: "A", template: "<di ...

Styling the "Browse" button for different web browsers

Here is the code snippet I am working with: HTML: <form> <input id = "file" type="file" /> <div id="custom_button">custom button</div> </form> Jquery: $("#custom_button").on("click", function () { $("#file"). ...

Is there a way to alter the camera's focal point in THREEJS to focus on a specific object already in the scene?

Currently, I am working with a scene extracted from a THREEJS example (https://threejs.org/examples/webgl_loader_fbx.html) that involves importing and displaying a threejs.json scene. The rendering of the scene works perfectly; I have a grid in place with ...

Occasionally, a loading gif appears after a vanilla JS/AJAX call, but the output

While using AJAX to retrieve JSON data containing information on the next steps, I am implementing a CSS class hide/show to toggle images/wrapper and loading .png image. However, even after toggling show/hide on the image, updating the image src, and addi ...

Sorting feature fails to function properly when used in combination with pagination and

<table> <thead> <tr> <th class="col-md-3" ng-click="sortDirection = !sortDirection">Creation Date</th> </tr> </thead> <tbody> <tr dir-paginate="item in items | filter:itemFilter | items ...

Tips on how to retain data from ajax requests when navigating between pages

Background Information In my web application, there is a search page with 3 dropdown boxes that are filled via ajax. The first box contains default locations upon loading the page. When a location is selected, a second dropdown appears with buildings from ...

Are you struggling with Grails - Ajax submission not functioning properly?

Trying to update a div when a form is submitted, but it seems like something is missing. Here's the HTML code: <%@ page contentType="text/html;charset=UTF-8" %> <html> <head> <meta name="layout" content="main" /> ...

Components in Angular modules that are loaded lazily with identical names

I have developed an Angular application with multiple lazy-loaded modules. Each of these modules contains different components that are conceptually similar but vary in content. For example, each module may have its own "home" component. Is it advisable t ...

Adding roles in ReactJS: A step-by-step guide

I am looking to enhance the admin's roles upon login to enable the creation of new users. Unfortunately, I am uncertain on how to add these roles and make them functional. Below is the code I have: Login.js class Login extends Component { cons ...

Is it possible to bind HTML within an AngularJS partial but encountering an inexplicable issue?

I'm facing an issue with my ng-repeat that involves using a partial HTML file to loop through and display items on a page. The variables within the partial are not displaying, but interestingly enough, the variable {{rule.name}} outside of the partial ...

The map function yields identical outcomes for all of the buttons

I need help with mapping an object that contains various note titles: ['note_title_test', 'note_title_test2', 'note_title_test32', 'note_title_test232', 'test title', 'testing1'] Below is the map ...

Spheroidal surface texture appears blurry following software update

Since updating from r67 to r86, our soccer balls don't look as sleek. Has anyone encountered a similar problem before? The code that previously gave us smooth spheres is now causing issues with the texture (and some lighting, but that's manageab ...

Create a search feature using Javascript and React that retrieves and displays results from a

I am currently developing a React application with a search feature that fetches JSON data and displays matching search results on the website import { React, useState } from 'react'; export default function PractitionerSearch() { const [data ...