Angular js - 是否可以使用 HTML 标签 <button> 进行路由？

Question

好的，我知道如何使用 <a> 标签执行 Angular ngRoute，现在我想知道我是否也可以使用 <button> 标签在 . .

假设我有以下代码。

app.js

index.html

var app = angular.module('test', ['ngRoute']);

app.config(function($routeProvider) {
  // mapping contacts.html to path /cnt
  $routeProvider.when('/cnt', {
    templateUrl: "https://www.google.co.za/", // the file to be mapped to
    controller: "cctrl" // including the controller for that file
  });
  // mapping student.html to path /std
  $routeProvider.when('/std', { // mapping url
    templateUrl: "https://www.facebook.com", // the file to be mapped to
    controller: "sctrl" // including the controller for that file
  });
});

// creating a controller name cctrl
app.controller('cctrl', function($scope) {

});
// creating a controller name sctrl
app.controller('sctrl', function($scope) {

});

 ul.zzz{
                list-style: none;
                width: 100%;
                margin: 10px auto;
            }
            ul.zzz li{
                float: left;
                padding: 10px;
            }
            
            .mainContent ng-view{
               margin: 0;
            }

<html ng-app="test">

<head>
  <title>Angular Test</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>

</head>

<body>
  <div>
    <ul class="zzz">
      <li><a href="#/std">Student</a>
      </li>
      <li><a href="#/cnt">Contacts</a>
      </li>
    </ul>
    <br/>
  </div>
  <div class="mainContent">
    <ng-view>

    </ng-view>
  </div>
</body>

</html>

上面的代码显示了工作 html 页面如果我使用 button

，下面的代码就是我心目中的运行

<button name="gotoPage2" ng-click="gotoNext()">Next</button>

<script>
  var app = angular.module('test',[ngRoute]);
  
  app.config(function($routeProvider){
    $routeProvider.when('button with a name gotoPage2 is click',{
    
      templateUrl:'page2.html'
    })
  });
  
  // or
  
  app.controller('controllerName', function($scope){
  
    $scope.gotoNext = function(){
          app.config(function($routeProvider){
          $routeProvider.when('button with a name gotoPage2 is click',
                              {templateUrl:'page2.html'}
                             )
            });
    };
  });
  </script>

有人有可靠的答案吗？不要问我为什么要使用 <button> 而不是 <a>

Answer 1

你有没有试过在按钮上使用 ng-click 并在控制器上有一个功能来改变路线

Html

<button ng-click="changeRoute({view})">Text</button>

控制器

...
$scope.changeRoute(view){
    $location.path(view);
}
...

我通常使用 ui-router，我比 ng-route 更喜欢它

Answer 2

将按钮标签放在里面 <a> 它会起作用

<li><a href="#/cnt"><button>name</button></a>

Angular js - 是否可以使用 HTML 标签 <button> 进行路由？

Angular js - Is it possible to route using HTML tag <button>?

htmlbutton

angularjs

ng-view

angular-ngmodel

angularjs-ng-route