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

Question

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

HP.*_*HP. 28 javascript angularjs angularjs-directive angular-ui-router

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

链接:http://plnkr.co/edit/vMtLN0ncpqAfgM6S1Ng4？p = preview

Answer 1

Alp*_*Alp 49

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

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

Run Code Online (Sandbox Code Playgroud)

DEMO

链接中的按钮与一些额外的工作使键盘可访问性变得丑陋:选项卡链接将焦点放在非按钮上,激活ui-sref; 但再次选项卡,按钮有焦点但"输入"不做任何事情.@Lalit的建议只是将'ui-sref`放在按钮而不是'ng-click`在我的测试中效果更好. (9认同)
ui-sref指令现在支持应用于任何可点击元素,因为指令内部绑定到指定元素的"click"事件. (6认同)

Answer 2

Mic*_*ole 43

其他解决方案对我不起作用.这是我使用ui-router做的事情:

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

Run Code Online (Sandbox Code Playgroud)

一块馅饼:-)

ui-sref在内部绑定到"click"事件,因此该属性可以应用于任何可点击元素. (11认同)

Answer 3

Lal*_*eva 8

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

归档时间：	11 年，8 月前
查看次数：	45851 次
最近记录：	8 年前