$locationChangeStart 上的 event.preventDefault() 无法按预期工作答案

【问题标题】：event.preventDefault() on $locationChangeStart doesn't work as expected$locationChangeStart 上的 event.preventDefault() 无法按预期工作
【发布时间】：2016-07-07 09:16:49
【问题描述】：

我在调用 $locationChangeStart 事件的 e.preventDefault 内部处理程序时遇到了一个奇怪的问题。我有这样的事情：

var unregisterCallback = _this.$rootScope.$on('$locationChangeStart', function (e) {
    e.preventDefault();
});

这发生在其中一个指令的链接函数中。问题是，当我单击某个路径的锚元素时，它实际上导航到它然后返回。我正在使用来自 Angular 1.5 的组件路由器。这几乎使这无用，因为我试图在用户导航之前显示一个确认对话框而不保存更改。问题是，由于这种重新导航，他无论如何都会丢失所有更改。知道发生了什么吗？

【问题讨论】：

标签： angularjs angular-component-router

【解决方案1】：

在代码中，您试图阻止 $locationChangeStart 中的默认事件，但您不想在单击 anchor() 标记时导航到新页面。在这种情况下，您可以删除锚标记中的 href ="#" 并按照以下方法进行

链接

另一种方法可以防止所有锚标记的默认操作，你可以有指令这样做

 app.directive('a', function() {
    return {
        restrict: 'E', // restricts to html elment
        link: function(scope, elm, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elm.on('click', function(ev){
                    ev.preventDefault(); // prevents the default functionality of the tag
                });
            }
        }
   };
});

【讨论】：

您的“链接”不是链接（只是文本）。此外，锚点还有一个 ng-href 属性，用于指定导航到的路径。