Состояние триггера в теге кнопки с использованием ui-sref

Каков элегантный способ запуска состояния с помощью angular-ui-router, нажав <button>?

Я использую ui-sref="main", но он не работает, хотя он работает с <a>.

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

Ссылка: http://plnkr.co/edit/vMtLN0ncpqAfgM6S1Ng4?p=preview

Ответ 1

Оберните кнопку в якорь, и вам хорошо идти:

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

DEMO

Ответ 2

другие решения не сработали для меня. Вот что я сделал с помощью ui-router:

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

Кусок пирога: -)

Ответ 3

Я думаю, лучший вариант - использовать его с кнопкой, как предложено в руководящих принципах управления angular -ui-bootstrap, поэтому я внедрил код plnkr. и попробовал его работать только с нажатием кнопки, не нужно писать ng-click, так как ui-sref легко работает с нажатием кнопки; Пожалуйста, смотрите.

Ответ 4

Для обеспечения доступности я реализую это решение, чтобы сохранить стиль тегов привязки и реализовать желаемые функциональные возможности клавиатуры в меню (верхние, нижние клавиши со стрелками перемещают фокус через элементы списка, а клавиша ввода активирует сфокусированную ссылку).

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

Функция go - это фасад/обертка вокруг службы состояния ui-router для перехода к состоянию.

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

Ответ 5

Я тоже использую navbar и не нужно использовать кнопки. У меня есть это:

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

Ответ 6

Main не является дочерним, и поскольку вы определили URL-адрес для этого, почему бы не попробовать это:

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

В этом случае я предполагаю, что вы хотите, чтобы кнопка была ссылкой на другую страницу.

Однако лучшим способом использования ui-router является создание родительского и дочернего представления, прочтите следующую документацию: https://github.com/angular-ui/ui-router/wiki#state-change-events

Ответ 7

Попробуйте это и посмотрите, работает ли он. Все, что я сделал, это создать div с типом button

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