如何防止锚元素上的 angular 行为？

Question

我有一个 html 页面，其中包含以下锚行：

<a href="#help" class="button scrolly">

在同一页面中 - 当我单击此锚点时，我的页面会滚动到以下部分：

<section id="signup">

scrolly class 是一个 jquery 插件，用于使页面滚动到该部分。现在，angular 改变锚点的行为，当我点击 link - 它搜索名为 'help' 的路线。我如何防止这种行为并使锚点只使用它的常规 HTML 行为？

我试图将 href 从 #help 更改为 ##help - 但它使页面跳转并且没有实现滚动 class 脚本。

我尝试通过指令覆盖锚点并使用以下代码使用常规 jquery 滚动（忽略滚动 class）：

app.directive('a', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attrs) {
            if (attrs.href === '#help') {
                elem.on('click', function (e) {
                    var target = $(this.href);
                    if (target.length) {
                        event.preventDefault();
                        $('html, body').animate({
                            scrollTop: target.offset().top
                        }, 1000);
                    }
                });
            }
        }
    };
});

但它不起作用。

知道如何解决这个问题吗？

Answer 1

我找到了答案 - 我的指令有一个错误 - 它应该是：

app.directive('a', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attrs) {
            if (attrs.href === '#help') {
                elem.on('click', function (e) {
                    var target = $(attrs.href);
                    if (target.length) {
                        event.preventDefault();
                        $('html, body').animate({
                            scrollTop: target.offset().top
                        }, 1000);
                    }
                });
            }
        }
    };
});

我使用 attr.href 作为 jQuery DOM 元素名称。

无论如何 - 如果有另一个更简单的答案，我会 link 知道。

谢谢。

如何防止锚元素上的 angular 行为？

How to prevent angular behavior on anchor element?

html

javascript

anchor

jquery

angularjs