Trigger state in button tag using ui-sref

javascript angularjs angularjs-directive angular-ui-router

47,268

Solution 1

Wrap the button in an anchor and you are good to go:

<a ui-sref="main">
    <button class="btn btn-danger navbar-btn" >Button Submit</button>
</a>

DEMO

Solution 2

the other solutions didn't work for me. Here's what I did using ui-router:

    <button ui-sref="app.schedule" class="btn btn-danger navbar-btn">
      Schedule
    </button>

Piece of pie :-)

Solution 3

I guess better option is to use it with button as suggested in angular-ui-bootstrap controls guidelines, so i have implemented the plnkr code. and have tried it to work with button click only, no ng-click need to be written as ui-sref works easily with the button click as it is; Please have a look.

Solution 4

For accessibility compliance, I'm implementing this solution to preserve the styling of anchor tags and implement the desired keyboard functionality of a menu (top, bottom arrow keys move focus through list items and the enter key activates the focused link).

              <ul class="dropdown-menu white" role="menu">
                <li role="menuitem">
                    <a href="#" ng-click="go('main')">
                        <i class="glyphicon glyphicon-log-out"></i> Sign Out
                    </a>
                </li>
              </ul>

The go function is a facade/wrapper around the ui-router state service to navigate to a state.

        $scope.go = function (page) {
               $state.go(page);
        };

View more solutions

47,268

Author by

HP.

Updated on October 06, 2020

Comments

HP. over 3 years

What is the elegant way to trigger a state with angular-ui-router by clicking <button>?

I am using ui-sref="main" and it doesn't seem to work although it works with <a> though.

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
  <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js" ></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>  
    <ul class="nav navbar-nav navbar-left">
      <li>
        <button class="btn btn-danger navbar-btn" ui-sref="main" >Button Submit</button>
      </li>
      <li>
        <a class="btn btn-danger navbar-btn" ui-sref="main" >Anchor Link Submit</a>
      </li>
    </ul>
  </nav>


</body>

</html>

Javascript:

var app = angular.module('plunker', ['ui.router']);

'use strict';

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

  $stateProvider
    .state("main", {
      url: "/main",
      resolve: {
        test: function() {
          alert("Triggered main state");
          return true;
        }
      }
    });

}]);


app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

Link: http://plnkr.co/edit/vMtLN0ncpqAfgM6S1Ng4?p=preview

HP. about 10 years

I cannot use <a> as it is the constraint from Bootstrap getbootstrap.com/components/#navbar-buttons
mlim1972 about 10 years

There is no constraints of using buttons in navbars. If you don't want to use buttons, you can use anchors: getbootstrap.com/components/#navbar-default
HP. about 10 years

It said loud and clear right here Like the standard button classes, .navbar-btn can be used on <a> and <input> elements. However, neither .navbar-btn nor the standard button classes should be used on <a> elements within .navbar-nav.
mlim1972 about 10 years

I don't know how you read it but I read it that you can use .navbar-btn inside <a> and <input> but .navbar-btn and standard buttons should NOT be used inside a <a> in a .navbar-nav
HP. about 10 years

Not use on a <a> element. The note didn't say not inside a <a>. So on is like together in this context. Try to test it yourself. Using %a.navbar-btn will mess up the button css.
DuelistPlayer about 9 years

Button in link with some extra work makes keyboard accessibility ugly: tab to link give focus to not-button, that activates the ui-sref; but tab again and the button has focus but Enter doesn't do anything. @Lalit's suggestion to just put ui-sref in the button instead of ng-click works better in my test.
DuelistPlayer about 9 years

Confirmed ui-sref in button instead of ng-click seems to be working great for me.
Alp about 9 years

That's a valid point Daryn. Thanks for pointing out the accessibility issues.
VeXii almost 9 years

why even use a button then?
Wallace Breza over 8 years

ui-sref internally binds to the "click" event so this attribute can be applied to any clickable elements.
Wallace Breza over 8 years

ui-sref directive now supports being applied to any clickable element as the directive internally binds to the "click" event for the specified element.
Nicholas Blasgen about 8 years

As the OP is using Bootstrap, it's actually easier to get rid of the button all together and style the "A" as being a button. <a class="btn btn-danger navbar-btn" ui-sref="main">Button Submit</a>
Keenan Stewart over 6 years

The code above actually gives a warning that Element button cannot be nested inside element 'a', so this isn't quite right.
Stradosphere about 6 years

This appears the most solid. The button click appears to have issues periodically when inside a directive and the page has to re-render. Changing the button element to an 'a' element fixed my issue.
kaiser over 5 years

this converts the button to a link (a). Applied css is not working anymore.