Open a New Tab on Button Click in Angularjs

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



Leave a reply



Submit