是否有一种简单的方法可以使用按钮来导航页面,就像angularjs中的链接一样

Question

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

我是否需要创建一个自定义指令来实现它？

Answer 1

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

Answer 2

使用bootstrap可以使用

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

Answer 3

如果你可以稍微乱丢你的标记,你可以用简单的方法做到这一点,然后<button>用一个anchor(<a>)链接包裹你.

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

此外,没有什么可以阻止你设置一个锚链接看起来像一个 <button>

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

Answer 4

您还可以在控制器中的范围上注册$ location(以便从html访问它)

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

然后直接在你的HTML中亲爱的:

<button ng-click="$location.path('#/new-page.html')">New Page<button>

Answer 5

 <a type="button" href="#/new-page.html" class="btn btn-lg btn-success" >New Page</a>

简单...