Предотвратите поведение якоря по умолчанию AngularJS

Ответ 1

Реальная проблема заключается в директиве

Правильно, каждый элемент <a></a> фактически является директивой AngularJS.

Кажется, что исправлены некоторые проблемы с IE, если вы посмотрите комментарии в коде.

Но все для меня отлично работает, когда я просто удалил директиву из основного кода AngularJS.

У меня была такая же проблема, как и у вас, и все остальные решения. Разница в том, что у меня была проблема только в IE.

Если вы не хотите играть с созданием AngularJS script из исходного кода, просто найдите htmlAnchorDirective в файле angular.js и удалите/прокомментируйте его.

Я считаю, что здесь есть большая проблема, которая должна быть решена в ядре AngularJS, но я еще не нашел ее.

UPDATE. Это решение, скорее всего, устарело! Вы должны попробовать использовать последнюю версию AngularJS.

Ответ 2

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

Ответ 3

Если вы посмотрите на исходный код для директивы элемента a (которая является частью ядра Angular), это состояния в строке 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;
}

Таким образом, вы даже можете сделать свой сайт более доступным, отметив реальные ссылки с тонким, другим стилем, а затем ссылками, которые выполняют функции.

Счастливое кодирование!

Ответ 4

Что именно не срабатывало при удалении атрибута href? Это именно то, что вы должны делать. См. Эту скрипку для примера: http://jsfiddle.net/terebentina/SXcQN/

Ответ 5

Как отметил @Justus, если исходный код похож:

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

Создание element.attr(href) в качестве нулевой строки '' должно привести вас в состояние if, поскольку !'' оценивается как true. Это решение @umur

Ответ 6

Я всегда делал deleteUser ($ event, user.id), и, похоже, он работал. Возможной проблемой может быть упорядочение переменных для вашего обработчика кликов. Первым аргументом должен быть объект $event.

Ответ 7

Я использую свою собственную директиву для достижения этой цели. Его механизм заключается в том, чтобы самостоятельно управлять директивой ng-click.

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);
                    });
                }
            };
        }
    };
}]);

Ответ 8

Это, по общему признанию, хак, но я сделал:

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

и в моем css был

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

Ответ 9

Следующие отлично работали для меня:

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