web-dev-qa-db-ja.com

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

javascriptangularjsangularjs-directiveangular-ui-router
28
HP.

ボタンをアンカーでラップすると、準備完了です。

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

[〜＃〜] demo [〜＃〜]

49
Alp

他のソリューションはうまくいきませんでした。 ui-routerを使用して行ったことは次のとおりです。

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

パイの一部:-)

43
Michael Cole

Angular-ui-bootstrapコントロールのガイドラインで提案されているように、ボタンで使用する方が良いと思います。そのため、 plnkr code を実装しました。ボタンクリックのみで動作するように試してみましたが、ui-srefはボタンクリックでそのまま簡単に動作するため、ng-clickを記述する必要はありません。ご覧ください。

8
Lalit Sachdeva

アクセシビリティ準拠のために、このソリューションを実装して、アンカータグのスタイルを保持し、メニューの目的のキーボード機能を実装します（上、下矢印キーはリストアイテム間でフォーカスを移動し、Enterキーはフォーカスされたリンクをアクティブにします）。

              <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);
        };
2
heatfan

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-イベント

0
Arial

これを試して、動作するかどうかを確認してください。タイプbuttonでdivを作成するだけでした。

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

私も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>
0
mlim1972