0

좋아들, 지금은 각도 js - HTML 태그 <button>을 사용하여 라우팅 할 수 있습니까? 내가 각도 ngRoute가 <code><a></code> 태그를 사용하여이 작업을 수행하는 방법을 알고

내가 다음과 같은 코드가 있다고 할 수 있습니다 .. 그 수도 나 사이의 이동 <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>

위의 코드를 내가 button

를 사용하는 경우 내 마음에서 실행 뭐죠 아래 코드가 작동 HTML 페이지를 보여줍니다

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

답변

2

<a> 경우 되세요 당신

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

경로

을 변경하려면 버튼을 NG 클릭하고 컨트롤러 기능을 사용해보십시오

이 컨트롤러

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

내가 일반적으로 UI 라우터를 사용, 난 더 나은 다음 겨-경로

좋아
+0

감사를 작동 <a> 내부의 버튼 태그를 넣어! (; - –

0

은 그것이 완벽하게 작동

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