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

如果你可以稍微乱丢你的标记，你可以轻松地做到这一点，然后用你的<button>包裹一个锚（<a>）链接。

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

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

@tronman this is not technically valid html5的评论中指出

，但它不应该在实践中造成任何问题

Answer 3

使用bootstrap，您可以使用

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

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>

简单...

Answer 6

对我来说，最好的解决方案是使用带有 ui-sref 的Angular路由器本机指令，如：

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

要了解该指令并获取更多选项，请访问ui-router docs：

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

：）

Answer 7

ngOnInit() {
   for (let nut of this.userSettings.nutrientData) {
      this.foodSettingsForm.controls[nut.abbr].valueChanges
         .subscribe(v => { console.log("value: ", v); this.completeValueChange(nut.abbr, v); });
   }
}

completeValueChange(field: string, value: boolean) {
   this.isChanged = true;
   Nutrient.updateNutrient(field, value, this.userSettings.nutrientData);
}

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

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

7 个答案: