[angularjs] 앵커 태그에서 기본값을 방지하는 방법은 무엇입니까?

업데이트 : 이후이 솔루션에 대한 내 생각이 바뀌 었습니다. 더 많은 개발과 시간을 보낸 후에이 문제에 대한 더 나은 해결책은 다음을 수행하는 것입니다.

<a ng-click="myFunction()">Click Here</a>

그런 다음 css추가 규칙을 갖도록 업데이트하십시오 .

a[ng-click]{
    cursor: pointer;
}

훨씬 간단하고 똑같은 기능을 제공하며 훨씬 효율적입니다. 앞으로이 솔루션을 찾는 다른 사람에게 도움이 되길 바랍니다.

다음은 이전 솔루션이며 레거시 목적으로 여기에 남겨두고 있습니다.

이 문제가 많이 발생하는 경우이 문제를 해결하는 간단한 지시문은 다음과 같습니다.

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

모든 앵커 태그 ( <a></a>)를 검사 하여 해당 href속성이 빈 문자열 ( "") 또는 해시 ( '#')인지 또는 ng-click할당 이 있는지 확인 합니다. 이러한 조건을 찾으면 이벤트를 포착하고 기본 동작을 방지합니다.

유일한 단점은 모든 앵커 태그에 대해이 지시문을 실행한다는 것입니다. 따라서 페이지에 많은 앵커 태그가 있고 소수의 기본 동작 만 방지하려는 경우이 지시문은 매우 효율적이지 않습니다. 그러나 거의 항상을 원 preventDefault하므로 AngularJS 앱 에서이 지시문을 사용합니다.

답변

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

<a href="#" ng-click="do($event)">Click</a>

// then in your controller.do($event) method
$event.preventDefault()

<a href="#" ng-click="do()" eat-click>Click Me</a>

module.directive('eatClick', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})

<a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
    Click</a>

ng-click="$event.preventDefault()"

<a href="#" ng-click="do(); $event.preventDefault()">Click</a>