javascript - 在 angularjs 模板中绑定(bind)外部 URL

Question

我有一个带有 Controller 和部分接线的 angularjs 应用程序..

在我的 Controller 中，我有一系列链接..

$scope.links = ['http://www.example.com/1','http://www.example.com/2'];

在我的部分，我有以下代码..

 <div ng-repeat="link in links">
 <a href="{{link}}" target="_blank">Link</a>
 </div>

这似乎不起作用..我在本地通过 NodeJS 应用程序运行它..所以我的 URL 总是以 http://dev-server.local:3000/"http://www.example.com"

谁能帮我弄清楚如何将 Controller 中的超链接直接添加到我的部分模板中，并使 Angular 不附加页面 URL..

Answer 1

您必须明确信任外部 URL:s。查看 $sce 的文档。

在您的 Controller 中，确保您依赖于 $sce，然后创建一个信任外部 url 的方法。

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

在您看来，您可以引用此方法并使用

传入 url

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