web-dev-qa-db-fra.com

Déclencher l'état dans la balise du bouton à l'aide de ui-sref

Quelle est la manière élégante de déclencher un état avec angular-ui-router en cliquant <button>?

J'utilise ui-sref="main" et il ne semble pas fonctionner même s'il fonctionne avec <a> bien que.

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';
});

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

javascriptangularjsangularjs-directiveangular-ui-router
28
HP.

Enveloppez le bouton dans une ancre et vous êtes prêt à partir:

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

DÉMO

49
Alp

les autres solutions n'ont pas fonctionné pour moi. Voici ce que j'ai fait en utilisant ui-router:

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

Morceau de tarte :-)

43
Michael Cole

Je suppose que la meilleure option est de l'utiliser avec le bouton comme suggéré dans les directives de contrôle angular-ui-bootstrap, j'ai donc implémenté le code plnkr . et l'avoir essayé de fonctionner avec le clic de bouton uniquement, aucun ng-click ne doit être écrit car ui-sref fonctionne facilement avec le clic de bouton tel quel; Jetez un coup d'oeil s'il vous plait.

8
Lalit Sachdeva

Pour la conformité de l'accessibilité, j'implémente cette solution pour préserver le style des balises d'ancrage et implémenter la fonctionnalité de clavier souhaitée d'un menu (les touches fléchées du haut et du bas déplacent le focus dans les éléments de la liste et la touche Entrée active le lien focalisé).

              <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>

La fonction go est une façade/wrapper autour du service d'état ui-router pour naviguer vers un état.

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

Main n'est pas une vue enfant, et puisque vous avez défini une URL pour cela, pourquoi ne pas essayer à la place:

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

Dans ce cas, je suppose que vous voulez que le bouton soit le lien vers une autre page.

Cependant, une meilleure façon d'utiliser ui-router est de créer une vue parent et enfant, lisez la documentation ci-dessous: https://github.com/angular-ui/ui-router/wiki#state-change- événements

0
Arial

Essayez ceci et voyez si cela fonctionne. Tout ce que j'ai fait, c'est créer un div avec un type button

<div ui-sref="main" type="button" >Go To Main State</div>
0
AllJs

J'utilise aussi la barre de navigation et je n'ai pas besoin d'utiliser de boutons. J'ai ceci:

<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
        <li ng-class="{ active: $state.includes('mystate1') }"><a ui-sref='mystate1'>mystate1</a></li>
        <li ng-class="{ active: $state.includes('mystate2') }"><a ui-sref='mystate2'>mystate2</a></li>
        <li ng-class="{ active: $state.includes('mystate3') }"><a ui-sref='mystate3'>mystate3</a></li>
        <li ng-class="{ active: $state.includes('mystate4') }"><a ui-sref='mystate4'>mystate4</a></li>
    </ul>
</div>
0
mlim1972