Asked  4 Months ago    Answers:  5   Viewed   416 times

I'm trying to implement an "open link in new tab" function using $state.go function. It would be awesome if there was smth like:

$state.go('routeHere', {
    parameter1 : "parameter"
    }, {
    reload : true,
    newtab : true // or smth like target : "_blank"
});

Is there any way to do that using AngularJS?

 Answers

31

Update: OK, I just solved it using the following code:

var url = $state.href('myroute', {parameter: "parameter"});
window.open(url,'_blank');
Tuesday, June 22, 2021
 
rypskar
answered 4 Months ago
89

You should add the target="_blank" and rel="noopener noreferrer" in the anchor tag.

For example:

<a target="_blank" rel="noopener noreferrer" href="http://your_url_here.html">Link</a>

Adding rel="noopener noreferrer" is not mandatory, but it's a recommended security measure. More information can be found in the links below.

Source:

  • MDN | HTML element <a> | attribute target
  • About rel=noopener
  • Opens External Anchors Using rel="noopener"
Tuesday, June 1, 2021
 
GGio
answered 5 Months ago
70

At the moment, the Selenium WebDriver API doesn't have any way of handling tabs. The project would really need a consistent, cross-browser set of methods for managing tabs before I would expect to see an implementation in one of the language bindings like Java. Until then, your JavaScript solution may be the only way, and remember that your code would then be responsible for managing the lifetime of that tab.

Thursday, July 1, 2021
 
MannfromReno
answered 4 Months ago
95

When you use route resolve argument as dependency injection in the controller bound to the route, you cannot use that controller with ng-controller directive because the service provider with the name aname does not exist. It is a dynamic dependency that is injected by the router when it instantiates the controller to be bound in its respective partial view.

Also remember to return $timeout in your example, because it returns a promise otherwise your argument will get resolved with no value, same is the case if you are using $http or another service that returns a promise.

i.e

  resolve: {
    auser: ['$timeout', function($timeout) {
      return $timeout(function() {
        return {name:'me'}
      }, 1000);
    }],

In the controller inject the resolve dependency.

appControllers.controller('AppCtrl', AppCtrl);

AppCtrl.$inject = ['$scope', '$rootScope','auser']; //Inject auser here

function AppCtrl($scope, $rootScope, auser) {
  var vm = this;
  vm.user = auser;
}

in the view instead of ng-controller, use ui-view directive:

<div ui-view></div>

Demo

Wednesday, August 11, 2021
 
inetbug
answered 2 Months ago
48

When you use route resolve argument as dependency injection in the controller bound to the route, you cannot use that controller with ng-controller directive because the service provider with the name HttpResponse does not exist. It is a dynamic dependency that is injected by the router when it instantiates the controller to be bound in its respective partial view.

Just remove the ng-controller="DealerLeads" from the view and make sure that view is part of the html rendered by the state leads @ templateUrl: "views/leads.html",. Router will bind it to the the template for you resolving the dynamic dependency HttpResponse. If you want to use controllerAs you can specify that in the router itself as:-

controller: 'DealerLeads',
controllerAs: 'leads' //Not sure if this is supported by ui router yet

or

controller: 'DealerLeads as leads',

Also when you do:

.state('leads', {
        url: "/leads",
        templateUrl: "views/leads.html",
        data: { pageTitle: 'Dealer Leads' },
        controller: 'DealerLeads',
        resolve: DealerLeads.resolve
    })

make sure that DealerLeads is accessible at the place where the route is defined. It would be a better practice to move the route definition to its own controller file so that they are all in one place. And whenever possible especially in a partial view of a route it is better to get rid of ng-controller starting the directive and instead use route to instantiate and bind the controller for that template. It gives more re-usability in terms of the view as a whole not being tightly coupled with a controller name and instead only with its contract. So i would not worry about removing ng-controller directive where router can instantiate the controller.

Friday, August 20, 2021
 
PandemoniumSyndicate
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :