有没有一种简单的方法来使用button导航页面作为链接在angularjs中做

在angularjs中,我想使用这样的button ,但我仍然需要button看起来。

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

作为(链接)

 <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代码中导航页面?

我是否需要创build自定义指令来实现它?

你的ngClick是正确的; 你只需要正确的服务。 $location是你在找什么。 查看文档的全部细节,但解决您的具体问题是这样的:

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

$location服务将根据您当前的设置添加散列(#),并确保不会发生页面重新加载。

如果你这样select的话,你也可以用一个指令来做更灵活的事情:

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

如果您可以稍微乱抛垃圾,那么您可以轻松地做到这一点,只需要用锚点( <a> )链接来包装您的<button>

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

另外,没有任何东西阻止你将锚链接样式化为<button>


正如@tron所发表的意见所指出的, 这在技术上并不合适html5 ,但在实践中不应该引起任何问题

随着引导,你可以使用

 <a href="#/new-page.html" class="btn btn-primary"> Click </a> 

您也可以在控制器的作用域上注册$ location(使其可以从html访问)

 angular.module(...).controller("...", function($location) { $scope.$location = $location; ... }); 

然后直接在你的html中inputhoney:

 <button ng-click="$location.path('#/new-page.html')">New Page<button> 
  <a type="button" href="#/new-page.html" class="btn btn-lg btn-success" >New Page</a> 

简单…

对我来说,最好的解决scheme是使用ui-sref的 Angular router原生指令,例如:

 <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

:)

 <button type="button" href="location.href='#/nameOfState'">Title on button</button> 

更简单…(注意地址附近的单引号)