1

好吧,伙计们,我知道如何使用标签来做 Angular ngRoute <a>,现在我想知道我是否也可以使用<button>标签在..

可以说我有以下代码。

应用程序.js

索引.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>if<a>

4

2 回答 2

2

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

html

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

控制器

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

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

于 2016-10-14T14:07:09.907 回答
1

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

<li><a href="#/cnt"><button>name</button></a>
于 2016-10-14T14:34:21.893 回答