Instructions on creating new tabs for items in $ionicActionSheet

I've been developing a mobile app using the ionic framework and AngularJS. I utilized the $ionicActionSheet for adding social links, which is working well. However, I'm facing an issue with opening these social links in new tabs when clicked. I attempted to use anchor tags and the $window.open() function but had no success.

Here is the code snippet:

app.controller('socialController', function($scope, $ionicActionSheet, $window) {

    $scope.showActionsheet  = function() {
        $ionicActionSheet.show({
            titleText: 'Social',
            buttons: [
                { text: '<a href="https://www.facebook.com" target="_blank"> <i class="icon ion-social-facebook"></i> Facebook </a>' },
                { text: '<a href="https://twitter.com" target="_blank"> <i class="icon ion-social-twitter"></i> Twitter </a>' },
                { text: '<a href="https://www.linkedin.com/" target="_blank"> <i class="icon ion-social-linkedin"></i> Linkedin </a>'},
                { text: '<a href="http://www.youtube.com" target="_blank"> <i class="icon ion-social-youtube"></i> Youtube </a>' }
            ],
            cancelText: 'Cancel',
            buttonClicked: function(index) {
                /*if(index == '0') {
                    $window.open("https://www.facebook.com", "_blank");
                    return true;
                } else if(index == '1') {
                    $window.open("https://twitter.com", "_blank");
                    return true;
                } else if(index == '2') {
                    $window.open("https://www.linkedin.com", "_blank");
                    return true;
                }else {
                    $window.open("http://www.youtube.com", "_blank");
                    return true;
                }*/
                return true;
            }
        });
    }
})

If anyone has any suggestions on how to resolve this issue or what I might be doing wrong, please feel free to provide your input. Any help or advice is greatly appreciated.

Answer №1

Figured it out. Here's the code:

app.controller('socialController', function($scope, $ionicActionSheet, $window) {

    $scope.showActionsheet = function() {
        $ionicActionSheet.show({
            titleText: 'Social',
            buttons: [
                { text: '<i class="icon ion-social-facebook"></i> Facebook' },
                { text: '<i class="icon ion-social-twitter"></i> Twitter' },
                { text: '<i class="icon ion-social-linkedin"></i> Linkedin'},
                { text: '<i class="icon ion-social-youtube"></i> Youtube' }
            ],
            cancelText: 'Cancel',
            buttonClicked: function(index) {

                if(index == '0') {
                    window.open("https://www.facebook.com", "_system", "location=yes");

                } else if(index == '1') {
                    window.open("https://twitter.com", "_system", "location=yes");

                } else if(index == '2') {
                    window.open("https://www.linkedin.com", "_system", "location=yes");

                }else {
                    window.open("http://www.youtube.com", "_system", "location=yes");

                }
                return true;
            }
        });
    }
})

However, I'm still unsure about the purpose of "location=yes".

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

What is the best way to update the state of a component in React Native using the response from

I'm having issues with retrieving data from an API using axios in my react native code. Initially, the state returns a null array before populating with all the index values. I'm struggling to set the state of the response properly. Can anyone pr ...

Is it possible to refresh a div on one .aspx page using content from another .aspx page?

Just beginning my journey with asp.net and currently tackling a project that involves two .aspx pages. Events.aspx: This page is where the site admin can update upcoming events and webinars using an available panel to input event title, date, information ...

Is it beneficial to use TypeScript for writing unit tests?

We are in the process of transitioning from JavaScript to TypeScript within my team. One question that has come up is whether we should also migrate our unit tests from JavaScript to TypeScript. Personally, I am not convinced of the significant benefits o ...

Encountering a Node-gyp rebuild issue while integrating NGRX into an Angular application on Mac OS

I am currently working on integrating ngrx/store into my Angular application. Johns-MBP:Frontend johnbell$ npm install @ngrx/store <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac9cbc4dccbd9ea9b849c849b99">[email pr ...

The animation glitches out when attempting to update the color of the imported model

I'm facing an issue with a Blender model that has animation. After uploading it to the site, the animation works perfectly. However, I'm trying to change the body color of the model, and when I attempt to do so, the body stops animating and becom ...

Photoshop JavaScript Character Identifier

It seems that the charIDToTypeID function is converting strings into IDs that Photoshop can use, but I'm encountering some IDs like "Lyr", "Ordn", and "Trgt" that I can't find any information on: var idLyr = charIDToTypeID( "Lyr " ); var idOrd ...

Remove ng-src by using ng-click

Having trouble clearing the ng-src (input file) using ng-click. Looking to solve this with Angular. Tried using angular.element.val('') but it's not working for me. Any other suggestions? controller.js app.imagePreview = false; $scope.th ...

The class type "selectLabel" passed to the classes property in index.js:1 for Material-UI is not recognized in the ForwardRef(TablePagination) component

Just started using react and encountering a repetitive error in the console after adding this new component. Here is the full error message: Material-UI: The key selectLabel provided to the classes prop is not implemented in ForwardRef(TablePagination). ...

Exporting a node express app for chai-http can be done by creating a module

I have set up an express app with multiple endpoints and am currently using mocha, chai, and chai-http for testing. Everything was running smoothly until I added logic for a pooled mongo connection and started creating endpoints that rely on a DB connectio ...

Positioning the camera directly behind the mesh for optimal framing

I designed a city and a character using Blender, then imported both as JSON objects into my script. My objective is to navigate my character through the city with the character always centered on the screen. However, I'm facing an issue where my chara ...

How can I create spacing between squares in an HTML div element?

Currently, I am working on my project using Laravel 5. I retrieve some integer values from a database and use them to create square divs in HTML. Below is the current output of my work. https://i.stack.imgur.com/sy2ru.png You may notice that there is spa ...

What causes the disorganization in Google.com's source code?

Isn't it interesting how a minimalist website like Google.com has such messy HTML source code? I have two main questions: Could the messy code be intentional in order to conceal certain parts of it? Has anyone attempted to provide an explanation fo ...

Angular.js allows for wrapping the currency symbol and decimal numbers within individual spans for enhanced styling and structure

Is it possible to achieve something similar using Angular? Unfortunately, it seems that achieving this is not straightforward, as Angular doesn't handle certain tags or elements properly. {{ 10000 | currency:"<span>$</span>" }} http://e ...

Ways to have a dropdown menu automatically close when opening another dropdown

Having an issue with managing multiple href links on a single page. When one link is clicked, it opens a dropdown, but if another link is clicked without closing the first one, the first dropdown remains open. How can I resolve this? I initially attempted ...

Stop the loop in cypress

We have a certain situation as outlined below loop through all name elements on the webpage if(name.text() matches expName) { name.click() break out of the loop } else { createName() } How can I achieve this in Cypress? Using return false doesn't se ...

When using angular's ngHide directive on a button, it will still occupy space in the

At the bottom of this HTML file, there are 3 buttons displayed. The first image illustrates the layout of the 3 buttons. The second image demonstrates what happens when the middle button in the footer is commented out. The third image shows the situat ...

Unable to scale image to full size using JavaScript

Seeking assistance on optimizing the width of a JavaScript slider to be 100%. Below is my existing HTML: <div id="mhblindsshow"> <style type="text/css"> #mhblindsshow img { display:none; } </style> <a href="blog ...

Encountering a Karma/Selenium issue while attempting to connect to: http://:9876/?id=77115711

After executing the command karma start, I encountered the following error: INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/ INFO [launcher]: Launching browser selenium_chrome with concurrency 5 INFO [launcher]: Starting browser chrome vi ...

What is the best way to retrieve data from a SQL database using Express?

I encountered a problem while working with Express Node.js. The error message "url not defined" keeps popping up. app.get("/id", function(req, res) { var id = req.param("id"); connection.query('SELECT `url` FROM dynamic_url where id ='+req.p ...

How to apply border-radius to a single column within an Ionic row?

My ionic view contains the following: <div> <div class="row"> <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-radius: 15px;">Row 1</div> <div class="col" style="text-align: center;"& ...