링크의 기본 동작 방지

Question

링크가 자동으로 다음 페이지로 연결되는 것을 방지하려면 어떻게합니까? 본질적으로, 나는 링크 목록을 가지고 있지만, 먼저 링크를 따라 가기 전에 점검을하고 싶다. 예를 들어

...

<tr ng-repeat= "match in matches"> 
    <td> 
     <a href= {{match.link}} ng-click= "check_link(match.link)"> Click me </a> 
    </td> 
</tr> 

내가 모르는 것은이 검사를 실패하면 링크를 다음에서 사용자를 방지 할 수 있습니다 "check_link"내부의 자바 스크립트 코드입니다.

Answer 1

<a href="{{match.link}}" ng-click="check_link(match.link, $event)">Click me</a> 

click 이벤트 ($ event로 사용 가능)를 check_link 함수에 전달해야합니다. 그런 다음에 따르지 않게하려면 preventDefault()를 호출하십시오.

$scope.check_link = function (yourParam, event) { 
    // your code 
    if (your_condition) event.preventDefault(); 
    // your code 
}; 

Answer 2

각도 기능은 일치 및 위치 재 지정을 처리해야합니다. 앵커 대신 단추 태그를 사용하면 자동 링크 관련 문제가 제거됩니다. 컨트롤러에서

<tr ng-repeat= "match in matches"> 
    <td> 
     <button type='button' ng-click= "check_link(match.link)"> Click me </button> 
    </td> 
</tr> 

: 당신은이 링크로 표시하려면

$scope.check_link = function(whatToCheck){ 
    if(checksOut){ 
     $location.path(whatToCheck); 
    } 
}; 

, Bootstrap 사용을 고려하고 그것을 'btn을 BTN 링크'의 클래스를 제공합니다.

Answer 3

개인적으로 응용 프로그램에서 링크의 기본 동작을 쉽게 방지 할 수있는 지시문을 만듭니다. 이렇게하면 링크가 정상적으로 작동하지 않도록하려는 경우 언제든지이 코드를 다시 사용할 수 있습니다.

예 : 클릭하면이 링크는 sayHello() 메소드를 호출해야합니다. 가능 여기

.directive('stopLink', function() { 
    return { 
    restrict: "A", 
    link: function($scope, ele, attrs) { 
     ele.click(function(e){ 
     e.preventDefault(); 
     }); 
    } 
    } 
}); 

전체 작업 예 : http://plnkr.co/edit/i5ZHDiwhnSVLkf59LxuU

이 방법, 당신이 필요한 모든 검사를 수행 할 수 있습니다 그것은 여기

<a href="http://google.com" ng-click="sayHello()" stop-link>Say Hello</a> 

이 지침에 대한 코드입니다 google.com으로 연결되지 않습니다 sayHello()에 입력 한 다음 $location을 사용하여 필요한 경우 사용자를 리디렉션 할 수 있습니다. 페이지를 변경하려면 $location.path('/blah') 또는 $location.url('http://google.com')을 사용하는 것이 좋습니다.

여기에 전체 $ 위치 문서 : https://code.angularjs.org/1.2.16/docs/api/ng/service/$location