47

angularjs では、このように使用したいのですbuttonが、まだボタンの外観が必要です。

<button href="#/new-page.html">New Page<button>

a（リンク）のように

<a href="#/new-page.html">New Page</a>

これより簡単な方法はありますか？

<button ng-click="newPage()">New Page<button>
$scope.newPage = function (){
    location.href = '#/new-page.html';
};

注: 実際、location.hrefナビゲーションに使用していたときは、全体が更新され、ナビゲーションは angularjs の制御下にありません。リンクを使用しない場合、javascript コードでページをナビゲートするにはどうすればよいですか?

それを実装するためにカスタム ディレクティブを作成する必要がありますか?

4

7 に答える 7

66

あなたngClickは正しいです。適切なサービスが必要なだけです。$locationあなたが探しているものです。詳細についてはドキュメントをご覧ください。ただし、特定の質問に対する解決策は次のとおりです。

$location.path( '/new-page.html' );

現在の$location設定に基づいて適切である場合、サービスはハッシュ (#) を追加し、ページのリロードが発生しないようにします。

選択した場合は、ディレクティブを使用してより柔軟なこともできます。

.directive( 'goClick', function ( $location ) {
  return function ( scope, element, attrs ) {
    var path;

    attrs.$observe( 'goClick', function (val) {
      path = val;
    });

    element.bind( 'click', function () {
      scope.$apply( function () {
        $location.path( path );
      });
    });
  };
});

そして、あなたはそれを何にでも使うことができます:

<button go-click="/go/to/this">Click!</button>

このディレクティブを改善するには多くの方法があります。何ができるかを示すだけです。以下は、動作中の Plunker のデモンストレーションです: http://plnkr.co/edit/870E3psx7NhsvJ4mNcd2?p=preview。

于 2013-04-06T07:14:42.073 に答える
26

ブートストラップを使用すると、使用できます

<a href="#/new-page.html" class="btn btn-primary">
    Click
</a>
于 2015-01-26T12:43:15.100 に答える
9 
 <a type="button" href="#/new-page.html" class="btn btn-lg btn-success" >New Page</a>

単純...

于 2014-08-20T14:01:08.860 に答える
2

私にとって、最善の解決策は、次のようなui-srefで Angular ルーターのネイティブ ディレクティブを使用することです。

<button ui-sref="state.name">Go!!</button>

そのディレクティブを理解し、より多くのオプションを取得するには、次の ui-router ドキュメントにアクセスしてください。

https://ui-router.github.io/docs/0.3.1/#/api/ui.router.state.directive:ui-sref

: )

于 2016-12-02T11:55:10.910 に答える