DEMO

Question

点击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="bootstrap-css@3.1.1" 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="angular.js@1.2.x" 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

Answer 1

将按钮包裹在一个锚中你很高兴：

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

DEMO

Answer 2

其他解决方案对我没用。这是我使用ui-router做的事情：

id

一块馅饼： - ）

Answer 3

我想更好的选择是按照angular-ui-bootstrap控件指南中的建议使用它，所以我实现了plnkr code。并且尝试过只使用按钮点击，不需要写入ng-click，因为ui-sref可以轻松地按下按钮点击;请看看。

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

Answer 5

我也使用导航栏，不需要使用按钮。我有这个：

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

Answer 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

Answer 7

试试这个，看它是否有效。我所做的就是创建一个类型为button

的div

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

使用ui-sref在按钮标记中触发状态

7 个答案:

DEMO