从 angularJS 部分链接到具有不同域的外部 URL

Posted 2023-03-07

【中文标题】从 angularJS 部分链接到具有不同域的外部 URL

【英文标题】：Linking to external URL with different domain from within an angularJS partial

【发布时间】：2014-08-18 22:13:34

【问题描述】：

我要做的就是在链接到外部站点的部分的 html 中包含一个锚标记。如果是这个标准的 html，代码就是：

<a href="http://www.google.com" target="_blank">google</a>

就这么简单，我似乎找不到一个可行的解决方案来通过角度拦截路线（或者可能无意中将我的锚替换为 https://docs.angularjs.org/api/ng/directive/a 指令？）。

我已经搜索了 SO 和网络的其他部分，并看到了无数的解决方案来处理：同一域内的链接、SPA 内的路由、页面内的路由 (ala $anchorScroll) 但这些都不是我的问题没错。

我怀疑这可能与使用 $sce 有关，但我是 Angular n00b 并且不确定如何正确使用该服务。我在视图控制器中尝试了以下操作：

$scope.trustUrl = function(url) 
    return $sce.trustAsResourceUrl(url);

对应的：

<a ng-href=" trustUrl(item) ">Click me!</a>

（如此处所述：Binding external URL in angularjs template）

但这似乎没有奏效（我最终在呈现的页面中只使用了 href="" ）。

使用这样的普通原版锚链接：

<a href="http://www.google.com">google</a>

也未能做到这一点（尽管一些在线建议标准 href 会导致完整的页面重新加载角度：AngularJS - How can I do a redirect with a full page load?）。

我也尝试添加 target=_self" 属性，但这似乎也没有效果。

我是否需要按照此处所述编写自定义指令？

Conditionally add target="_blank" to links with Angular JS

对于这样一个简单的操作来说，这一切似乎太复杂了，我觉得我在我的 n00bishness 中遗漏了一些明显的东西，至少我希望如此，因为这个过程感觉非常繁重，只是链接到另一个 url。

提前感谢您提供任何解决方案、建议、参考或指导。

【问题讨论】：

你的第一个 sn-p（原版 html 锚）对我来说很好用。

感谢您为我验证凯文。我必须在其他地方发生一些事情，那就是拦截或阻止我的链接工作。奇怪的是，我可以右键单击该链接并在新选项卡中打开它没问题，但是当我左键单击时，我什么也得不到。就我应该查看的内容而言，这里是否有任何常见的嫌疑人？我在视图上确实有一些用于执行视差效果的自定义代码，但它仅限于拦截滚动到视图中下一张幻灯片的特定按钮上的代码。单击锚点不会与该代码交互。否则，这是一个非常普通的设置。

Kevin，我愿意接受您的评论作为我对此的回答，因为它确实与锚无关，并且您为我验证了原版代码有效。出于某种原因，我似乎无法在这里弄清楚如何做到这一点。哇 - 对老脑来说是糟糕的一天。

不幸的是，由于我的评论并没有真正回答问题，因此我不适合发布它。如果我们只是等到您解决问题，然后您发布带有解释的答案，那会更好。如果问题可以解决几天/几周，那没关系。

啊，好的-谢谢！我会回到它。不管怎样，谢谢你告诉我我的问题出在其他地方。

【参考方案1】：

事实证明，我确实将页面中的所有锚链接都绑定到事件侦听器并被覆盖。由于该代码是页面工作方式的基础，我不想弄乱它。相反，我通过使用 ng-click 绕过它来调用新的 url，如下所示：

HTML：

<a class="navLinkHcp" href="hcpurl" title="Habitat Conservation Plan" target="_blank" ng-click="linkModelFunc(hcpurl)">Habitat Conservation Plan</a>

控制器：

$scope.hcpurl = 'http://eahcp.org/index.php/about_eahcp/covered_species';

$scope.linkModelFunc = function (url)
  console.log('link model function');
  $window.open(url);

瞧！很好走。 再次感谢 KevinB 提示我这可能是问题所在。

【讨论】：

你是怎么知道你有一个绑定的事件监听器的？我遇到了同样的问题，找不到源。

monitorEvents($0) at DevTool/console per this link：***.com/questions/10213703/…