기본 앵커 동작 방지 AngularJS

기본 앵커 동작 방지 AngularJS

사용자가 링크를 클릭하면 컨트롤러 내부 기능에서 코드를 실행하고 싶습니다.하지만 URL이 바뀌는 것을 방지하고 싶습니다.

저는 다음과 같은 가능성을 시도했습니다.

1. href 속성을 제거했습니다.작동하지 않았지만 여전히 URL을 '/'로 변경합니다.

2. 시험을 마친ng-click='deleteUser(user.id, $event)'그리고.$event.preventDefault()사용자() 함수를 삭제합니다.안 됐어요.

3. 제가 깃허브에서 발견한 의도치 않은 재로드에 대한 해킹입니다.

지금은 이렇게 해야 합니다.

<a ng-click="deleteUser(user.id)" href="javascript:">Delete user</a>

질문.

링크가 URL을 변경하지 못하도록 하는 '클린' 방법은?

<a ng-click="deleteUser(user.id)" href="">Delete user</a>

소스 코드를 보면,a요소 지시문(각 코어의 일부인)은 29 - 31 행에 다음과 같이 명시됩니다.

if (!element.attr(href)) {
    event.preventDefault();
}

그 말은 Angular가 이미 href 없이 링크 문제를 해결하고 있다는 뜻입니다.당신이 아직 가지고 있는 유일한 문제는 CSS 문제입니다.ng-클릭이 있는 앵커에도 포인터 스타일을 적용할 수 있습니다. 예:

a[ng-click] {
    /* Styles for anchors without href but WITH ng-click */
    cursor: pointer;
}

따라서 실제 링크를 기능을 수행하는 링크보다 섬세하고 다른 스타일로 표시하여 사이트에 더 쉽게 접근할 수 있습니다.

해피코딩!

진짜 문제는 지시에 있습니다.

맞아요, 여러분.<a></a>원소가 실제로는 Angular입니다.JS 지시.

코드에 있는 댓글을 보면 IE의 몇 가지 문제를 해결할 수 있을 것 같습니다.

하지만 제가 방금 Angular에서 지시를 삭제했을 때 저는 모든 것이 잘 작동하고 있습니다.JS 코어 코드.

저도 당신과 같은 문제를 겪고 있었고 다른 모든 해결책을 시도했습니다.다른 점은 IE에서만 문제가 발생했다는 것입니다.

Angular를 만들고 싶지 않은 경우소스의 JS 스크립트는 angular.js 파일에서 htmlAnchorDirective를 검색하여 제거/댓글로 남기면 됩니다.

여기서 더 큰 문제가 있다고 생각합니다. 이 문제는 Angular에서 다루어야 합니다.JS core, 근데 아직 못 찾았어요.

업데이트: 이 솔루션은 현재로서는 구식일 가능성이 높습니다.최신 Angular를 사용해 보십시오.JS 버전.

href 속성을 제거했을 때 정확히 무엇이 작동하지 않았나요?그게 바로 당신이 해야 할 일입니다.예를 들어 http://jsfiddle.net/terebentina/SXcQN/ 을 참조하십시오.

@Justus가 지적한 대로 소스 코드가 다음과 같습니다.

if (!element.attr(href)) {
    event.preventDefault();
}

만들기element.attr(href)널 문자열로서 ''다 if으로서,!''합니다.true입니다. 그것이 @umur의 해결책입니다.

저는 항상 deleteUser($event, user.id )를 해왔는데 효과가 있는 것 같았습니다.변수를 클릭 처리기에 정렬하는 것이 문제가 될 수 있습니다.첫 번째 인수는 $event 개체여야 합니다.

나는 이것을 달성하기 위해 맞춤 지시를 사용합니다.그것의 메커니즘은 ng-click directive 그 자체를 작동시키는 것입니다.

angular.module('delete', [])
.directive('buttonDelete', ['$parse', function ($parse) {
    var confirmFunc = function (scope, element, attr, event, ngClick) {
        if (! confirm("Are you sure?")) {
            event.preventDefault();
        }
        else {
            // Copy from ngEventDirectives initialization.
            var fn = $parse(ngClick);
            scope.$apply(function() {
                fn(scope, {$event:event});
            });
        }
    };

    return {
        restrict: 'C',
        compile: function (element, attr) {
            var ngClick = attr.ngClick;
            attr.ngClick = '';

            return {
                pre: function (scope, element, attr) {
                    element.click(function (e) {
                        confirmFunc(scope, element, attr, e, ngClick);
                    });
                }
            };
        }
    };
}]);

이건 분명히 해킹이지만, 제가 한 짓입니다.

<span class="link" ng-click="deleteUser(user.id)">Delete user</span>

그리고 내 csshad에서

span.link {
    /* style like a link */
}

다음은 제게 아주 효과적이었습니다.

<a ng-href="javascript: return false;" ng-click="alertSearchCtrl.deleteAlert()">Remove</a>

언급URL : https://stackoverflow.com/questions/12384058/prevent-default-anchor-behaviour-angularjs