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



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

我需要创建一个自定义指令来执行它吗?

您的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.

使用引导程序可以使用

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

如果你可以随意丢弃标记,你可以用一种简单的方法,用锚(<a>(链接包装你的<button>

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

此外,没有什么可以阻止您将锚链接设置为<button>


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

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

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

然后直接去你的html:中的蜂蜜

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

简单

对我来说,最好的解决方案是使用Angular路由器本机指令和ui sref,比如:

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

要了解该指令并获得更多选项,请访问ui路由器文档:

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>

更简单的是。。。(注意地址周围的单引号(

相关内容

最新更新