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

【问题标题】：Angular js - Is it possible to route using HTML tag <button>?Angular js - 是否可以使用 HTML 标签 <button> 进行路由？
【发布时间】：2017-02-23 23:15:51
【问题描述】：

好吧，伙计们，我知道如何使用<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>

【问题讨论】：

标签： angularjs angular-ngmodel ng-view angularjs-ng-route htmlbutton

【解决方案1】：

您是否尝试使用 ng-click 按钮并在控制器上具有更改路线的功能

HTML

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

控制器

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

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

【讨论】：

【解决方案2】：

把按钮标签放在<a>里面就可以了

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

【讨论】：