angularjs에서와 같이 버튼을 사용하여 페이지를 탐색하는 간단한 방법이 있습니까?

angularjs에서와 같이 버튼을 사용하여 페이지를 탐색하는 간단한 방법이 있습니까?

angularjs는 제가 쓰고 싶은 게button이렇게요, 하지만 전 여전히 버튼이 필요해요.

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

~하듯이a(link)가 하는 일

<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 코드로 페이지를 탐색하려면 어떻게 해야 합니까?

커스텀 디렉티브를 작성해야 합니까?

당신의.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

부트스트랩을 사용하면

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

마크업을 조금 버리는 것도 괜찮으시다면, 간단한 방법으로 포장해 주세요.<button>닻을 내리고(<a>) 링크입니다.

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

또한 앵커링크를 스타일링하는 것을 막을 수 있는 것은 없습니다.<button>

---

@tronman의 코멘트에서 지적된 바와 같이, 이것은 기술적으로 유효한 html5는 아니지만, 실제로 어떠한 문제도 일으키지 않습니다.

컨트롤러 스코프에서 $location을 등록할 수도 있습니다(html에서 액세스 가능).

angular.module(...).controller("...", function($location) {
  $scope.$location = $location;
  ...
});

그리고 html에 있는 꿀을 향해 직진합니다.

<button ng-click="$location.path('#/new-page.html')">New Page<button>

 <a type="button" href="#/new-page.html" class="btn btn-lg btn-success" >New Page</a>

심플...

최선의 해결책은 다음과 같은 ui-sref를 사용하여 Angular 라우터 네이티브 디렉티브를 사용하는 것입니다.

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

이 지시사항을 이해하고 더 많은 옵션을 얻으려면 다음 URL에서 UI 라우터 문서를 참조하십시오.

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

: )

<button type="button" href="location.href='#/nameOfState'">Title on button</button>

더 간단하게...(주소 주위에 작은 따옴표를 붙입니다)

언급URL : https://stackoverflow.com/questions/15847726/is-there-a-simple-way-to-use-button-to-navigate-page-as-a-link-does-in-angularjs