javascript - AngularJS路由-基于匹配URL主机名的调用函数

Question

使用 AnguarJS，我想在当前网站内单击的链接中存在特定主机名时调用一个函数。用户将继续单击所单击的链接，但该函数将在后台调用。

$routeProvider 是走向这样的事情的最佳方向吗？它需要是站点范围的，所以这就是为什么我认为 AngularJS RouteProvider 可能会起作用。我首先问是因为我是 Angular 的新手。我试图避免必须识别每个点击事件来监听链接中的特定域名，因为有很多地方并且它们会因为使用 CMS 而发生变化。

谢谢!!

Answer 1

使用$routeProvider，您只能在同一域和 AngularJS 上下文中定义路由。这是隐含的。因此，您只能“捕获”# 符号(hashbang)之后的 URL 段。

正如我所说，您可能需要这样做:

$(body).on('click', 'a', function(e) {
    var url = $(this).attr('url');
    // now do something with url 
});

为了简单起见，我使用 jQuery 和 event delegation出于性能原因。

请注意，如果链接更改了当前页面的 URL，此将不起作用。这意味着您正在导航到另一个页面并销毁当前页面，即运行此 JS 代码并监听 click 事件的页面。仅当您在链接上使用 target="_blank" 时，此功能才有效。

使其适用于外部链接和 target="_self" 链接的方法:

$(body).on('click', 'a', function(e) {
    var url = $(this).attr('url');
    if(url === 'http://example.com/') {
         e.preventDefault(); 
         // 1. do some stuff, even AJAX
         // 2. after stuff completes:
         window.location = url;
    }
});

不幸的是，这意味着用户必须等待 (1) 处发生的任何情况才能真正转到新 URL。如果您所做的事情很快(不到一秒)，也许将页面上可见的所有内容与 e.preventDefault 一起隐藏就足够了。