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 回答
20

如果你对乱扔标记没意见，你可以用简单的方法做到这一点，只需<button>用锚 ( <a>) 链接包装你的标记。

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

此外，没有什么可以阻止您将锚链接设置为看起来像<button>

正如@tronman 的评论所指出的，这在技术上不是有效的 html5，但在实践中它不应该引起任何问题

于 2014-03-26T22:08:04.067 回答
10

您还可以在控制器的范围内注册 $location（以使其可以从 html 访问）

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

然后直接在你的 html 中寻找蜂蜜：

<button ng-click="$location.path('#/new-page.html')">New Page<button>
于 2014-10-31T14:25:51.717 回答
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 回答
-1 
<button type="button" href="location.href='#/nameOfState'">Title on button</button>

更简单...（注意地址周围的单引号）

于 2016-09-26T10:16:07.903 回答