When attempting to open a page in a new tab, I typically employ a specific method. However, I have encountered an issue where using target="_blank" causes me to lose my parameters

<a ui-sref="app.reports.equipmentarg({factoryId: fid})" target="_blank">Click Me</a>

The link works well and passes the parameter successfully when I remove the target attribute. However, it opens in the current tab which is not ideal. I would like to open the page in a new tab while still passing the parameters using the same method.

state('app.reports.shiftarg', {url: '/shift',
templateUrl: 'assets/app/modules/report/views/view/app.shift.report.html',
controller: 'ShiftReportCtrl',
params: { factoryId: null}
javascriptangularjsangular-ui-routerangularjs-routingurl-parameters

Answer №1

By utilizing the url property, there is no necessity for the params property.

Ensure that all essential params are included in the url.

state('app.reports.shiftarg', {
    url: '/shift/:factoryId',
    templateUrl: 'assets/app/modules/report/views/view/app.shift.report.html',
    controller: 'ShiftReportCtrl'
})

Subsequently, within the html, you can utilize ui-sref.

<a ui-sref="app.reports.equipmentarg({factoryId: fid})" target="_blank">Click Me</a>

It should be noted that the closing double quotation " before the target attribute was omitted.

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 replacing the portion of a URL before the # symbol

My AngularJS application is being launched from another app, and the URL to open it looks like this: http://localhost:21770/App/IAnalytics?FromApp=abc#/PBIDefault The "FromApp" parameter indicates the source app that triggered the launch of my AngularJS ...

angularjsasp.net-mvcmodel-view-controllerngroute

Issue with React: Children's state is altering the state of the parent component

Question : Why is it possible for a child component to change the state of its parent when each component has its own state? Below is the complete code for my app: import React, { Component } from 'react'; import { render } from 'react-do ...

javascriptreactjsecmascript-6material-ui

Enhancing User Experience with JQuery Pagination and Efficient Data Loading

I am looking to implement pagination for data retrieved from a database. The information needs to be displayed in a 4x4 table format. For the remaining data that doesn't fit in the initial view, I want to enable pagination with AJAX functionality so ...

javascriptjqueryajax

Utilizing Rails to incorporate a comment box through jquery on individual posts within a index page showcasing all listed posts

As I display a list of posts on my index file, I want each post to have its own comments section. To achieve this, I have added a "Show Comments" button for each post. However, when I click the button, jQuery triggers all comment boxes on the page instead ...

javascriptjqueryruby-on-railsfacebookcomments

"Please ensure that the field values in MessageEmbed are not left empty" stated discord.js

I've been working on a Discord bot using node.js, and I've encountered an issue with my kick and ban commands. I've tried to incorporate Discord embeds, but I keep running into this problem. Can anyone assist me with this? Here is the code ...

javascriptnode.jsnpmdiscord.js

Create a JavaScript function that performs multiplication and returns two distinct calculations

Upon examination of the embedded script below, I noticed that it is only providing a single result (500). How can I modify my code to generate both results? Your advice on this matter is greatly appreciated. function multiplier() { var number = 2 ...

javascriptarraysfunctionmultiplication

Patience is key while waiting for Meteor.loggingIn() to be false

I need help implementing authentication on a React route using Meteor and React.js. Here is my current approach: <Router history={browserHistory}> <Route path="/vendor/chat" component={VendorChat} onEnter={requireVendorAuth} /> </Route ...

javascriptreactjsmeteorreact-router

Unable to use jQuery to delete class from an element

Here is the markup I am working with: <div class="row"> <img src="image.png" class="download-image regular-image" /> <div class="options"> <p>download</p> </div> <img src="image.png" class="download-image r ...

javascriptjqueryhtml

Lost, a lone figure... beyond salvation

Help! I am encountering these errors while validating my code with W3C Line 41, Column 143: Oops! Stray end tag body. …t1_02.gif','images/Part1_03.gif','images/Part1_04.gif','images/Part1_05.png')"> ✉ Line 41, C ...

javascripthtmlw3crecover

"The issue of Django showing a 'select a valid choice' error when trying to populate a select field

I encountered a validation error while trying to create a form with an empty select field: area_sp = forms.ChoiceField(widget=forms.Select(attrs={'class': 'form-control', 'id':'area_select'})) After populating the ...

javascriptdjangodjango-forms

Is there a way to simultaneously send a file and additional information in Flask?

Below is the code I am using to upload a file to Flask. Client Side: <form id="upload-file" method="post" enctype="multipart/form-data"> <fieldset> <label for="file">Select a file</label> <input name="file8" ...

javascriptjqueryajaxflask

What sets declaring variables apart in Vue?

Can you clarify the distinctions among various methods of declaring variables? When should I employ each of these declaration methods? <script> const someVariable = 12345 export default { name: 'App', } </script> <script> e ...

javascriptvue.jsvuejs2

An error is triggered when attempting to target multiple element Id's in Javascript and one of them cannot be located

I have encountered an issue when trying to target multiple IDs with JavaScript in order to disable input fields associated with them. The script I am using seems straightforward, but I noticed that on pages where the middle element is missing, the third on ...

javascripthtmlcss

Setting the backEnd URL in a frontEnd React application: Best practices for integration

Hey there - I'm new to react and front-end development in general. I recently created a RESTful API using Java, and now I'm wondering what the best way is to specify the backend URL for the fetch() function within a .jsx file in react. Currently, ...

javascriptjavareactjsnpm

There seems to be an issue with declaring Gulp Open

Here is the code snippet for my `open.js` task: import gulp from 'gulp'; import gulpOpen from 'gulp-open'; gulp.task('open', () => { // doesn't work with `function()` either. const options = { uri: 'local ...

javascriptnpmgulp

Utilizing HTML and JavaScript to add grayscale effect to images within a table, with the ability to revert to the colored version upon mouseover

Seeking advice on utilizing the mouseover / mouseout event in javascript to implement grayscale on a table. The challenge requires creating a gray image grid (table) using HTML and then incorporating Javascript so that hovering over an image triggers it to ...

javascripthtmlonmouseovergrayscaleonmouseout

Experimenting with an angularjs directive, not yielding the desired results

Trying to use a directive here, and all the resources I've found online seem to be a variation of what I have. Here is the directive I created: angular.module('App'); App.directive("scrollBottom", ["$interval", function ($interval) { retu ...

angularjsangularjs-directivedirective

Repetitive submissions of a form through Ajax post requests

Currently, I am utilizing this code to handle data sent via Ajax. Within the code, I am using the summernote editor. However, I have encountered an issue where if I submit the form while missing a required field, the form displays a 'required alert&ap ...

javascriptjqueryajax

Toggle the visibility of elements based on radio button selection, and dynamically insert new elements

I am facing an issue with JavaScript and jQuery. Below is how my code appears in the browser. https://i.sstatic.net/nImxS.jpg When "New Question" is selected, I want to display <div class="new"> and hide <div class="existing">. Conversely, w ...

javascriptjqueryhtml

What is the syntax for creating ES6 arrow functions in TypeScript?

Without a doubt, TypeScript is the way to go for JavaScript projects. Its advantages are numerous, but one of the standout features is typed variables. Arrow functions, like the one below, are also fantastic: const arFunc = ({ n, m }) => console.log(`$ ...

javascripttypescriptarrow-functions