Open a new tab on button click in AngularJS
You can do this all within your controller by using the $window service here. $window is a wrapper around the global browser object window.
To make this work inject $window into you controller as follows
.controller('exampleCtrl', ['$scope', '$window',
function($scope, $window) {
$scope.redirectToGoogle = function(){
$window.open('https://www.google.com', '_blank');
};
}
]);
this works well when redirecting to dynamic routes
How to allow 'Open in a new tab' when using ng-click?
If possible you should convert your element to an anchor element.
<a ng-href="{{ your dynamic url }}" ng-click="your function">Your link text</a>
The browser will interpret the element as a link, and will therefor give you the correct dropdown.
Note that you also have to have the correct href value to open in a new tab.
EDIT:
I would recommend this question if you want a more detailed answer on how to fix this kind of behaviour using JQuery.
Bind click event to open a link in new tab
Basic rule is that if you are going to do anything with the DOM then you should have a directive and use normal JQuery in the link function
new-tab.directive.coffee
angular.module 'my.module'
.directive 'newTab', ($window) ->
restrict: 'A'
link: (scope, element, attributes) ->
element.on('click', (evt)->
# Open link in new tab here
)
Example Usage:
<a href='/your/link' new-tab>
You will likely have to do some "prevent default" stuff as well so that the link doesn't still go to the same page in the current window (now that I think about it).
You could also try just setting the _target='blank' property on any and all a nodes.
I haven't tested this
new-tab-a.directive.coffee
angular.module 'my.module'
.directive 'a', -> #I doubt this is a good idea though using 'a' as a directive name.
restrict: 'E'
link: (scope, element, attributes) ->
attributes.target = '_blank'
AngularJS Select Tab from Button Click
You can use md-selected attribute in md-tabs to choose the selected tab,https://material.angularjs.org/latest/api/directive/mdTabs
<md-button id="button" ng-click="selectedTab = 2" class="md-raised">Select Tab Three</md-button>
<div ng-cloak>
<md-content>
<md-tabs md-selected="selectedTab" md-dynamic-height md-border-bottom>
<md-tab label="one">
<md-content class="md-padding">
<h1 class="md-display-2">Tab One</h1>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
</md-tab>
<md-tab label="three" id="three">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Three</h1>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
Protractor Button Click and open page in new tab
You need to wait until the page opens by using callbacks. Try something in this sense:
element(by.id("newPlan")).click().then(function () {
browser.getAllWindowHandles().then(function (handles) {
newWindowHandle = handles[1]; // this is your new window
browser.switchTo().window(newWindowHandle).then(function () {
// fill in the form here
expect(browser.getCurrentUrl()).toMatch(/\/url/);
});
});
});
Related Topics
Angular 8 Loose Data After Refresh Page
Disable Prev Control on First Slide and Disable Next Control on Last Slide
Refresh Leaflet Map: Map Container Is Already Initialized
How to Take Screenshot of a Div With JavaScript
Escaping Apostrophe (Single Quote) Character in JavaScript and HTML
Converting User Input String to Regular Expression
Javascript Regex Splitting Words in a Comma Separated String
Updating Array in Object Properties Using Property'S Name
Chat Box, Auto Scroll to Bottom
How to Parse Xml File in React
Move an Image With JavaScript Using Mouse Events
Chrome Blank Pdf Print Preview
How to Mock a Fake Database for When Unit Testing Against Knex
Angular: Toggle Active Class on Only Button the Current Clicked Button (Not Using *Ngfor)
Vue Router This.$Router.Push Not Working on Methods
How to Prevent Invalid Characters from Being Typed into Input Fields