javascript - AngularJS + ui.router : different behavior between directive controller and link functions

Question

我有一个简单的指令external-link，导致放置它的链接在单独的窗口而不是当前窗口中打开网址

<a app-external-link href="http://example.com">Example</a>

它类似于 target="_blank" 但能够跟踪用户何时点击它

为了举例，我删除了跟踪功能，因此它的行为只需类似于 target=_blank 属性

angular.module('app', [])
.directive('appExternalLink', function ($window) {
  var link = function (scope, element, attrs) {
    element.on('click', function (event) {
      event.preventDefault();
      $window.open(attrs.href, '_blank');
    });
  };

  return {
    scope: true,
    link: link
  };
});

此实现按预期工作。让我惊讶的是，在我的我使用指令 Controller 的第一种方法:

angular.module('app', [])
.directive('appExternalLink', function ($window) {
  var controller = function ($element, $attrs) {
    $element.on('click', function (event) {
      event.preventDefault();
      $window.open($attrs.href, '_blank');
    });
  };

  return {
    scope: true,
    controller: controller
  };
});

我不明白为什么(因此这个问题)在指令 Controller 中例如，链接成功在新窗口中打开，但它也发生了变化新网址的当前 View

就好像 event.preventDefault() 在这种情况下什么也不做

关于为什么会发生这种情况有什么想法吗？

更新:

仅当该指令与 ui-sref 一起使用时才会出现此问题

<a app-external-link ui-sref="foo">Example</a>

Plunk here

Answer 1

我有 2 个可能的解决方案。

1. 结合使用 event.stopImmediatePropagation() 和 event.preventDefault() 来停止 Controller 中的点击处理程序当前页面的 url 也不会改变。

   演示:http://plnkr.co/edit/6Qi8NcWMmOvC4R3ZAqsf?p=info

2. ui-sref 已经可以与 target="_blank" 配合使用，因此您的指令只需将该属性添加到元素中，然后执行您想要的任何操作在您的点击处理程序中执行此操作，甚至不必担心处理事件或使用 window.open。

   element.attr('target', '_blank');
   element.on('click', function (event) {
       //can track clicks or do whatever you want here
       console.log(attrs.href + ' opened in new tab.');
   });
   

   演示:http://plnkr.co/edit/brvftLiqXLznS6IWNmVA?p=info

我更喜欢2，因为我列出的原因，而且它的代码更少，并且它可以让Angular和ui-router分别完成他们的工作从你想要做的事情(而不是必须重复一些逻辑)。另外，我还没有真正测试过1，它可能会影响我还没有看到的其他事情。不过，如果您愿意的话，它似乎确实有效。