在 AngularJS 中使用 iFrame

Using Angular 1.2+，我正在尝试找出一种“有角度”的方式来加载 iFrame，但我在任何地方都找不到任何教程/任何真正的讨论。

基本上，我有一个显示链接列表的搜索页面。单击链接应调用控制器中的一个函数，该函数将数据（可能通过 $http 服务？）加载到 iFrame，同时保持搜索结果可见。

这是一些基本代码（我从未真正使用过iFrames在此之前，如果这是完全错误的，请道歉）

View

<div ng-controller="searchPage">
  <div ng-repeat='post in searchResults'>
    <a ng-click="itemDetail(post._infoLink)">Here's a link!</a>
  </div>
  <div class="detailView" ng-show="itemShown">
    <iframe ng-src="detailFrame"></iframe>
  </div>
</div>

控制器

$scope.itemDetail = function(link){
  $scope.itemShown = true;
  $scope.busy = true;
  $http.get(link).success(function(data){
    $scope.busy = false;
    $scope.detailFrame = data;
  });
}

此代码当前给出错误：

 XMLHttpRequest cannot load <url>. Origin http://localhost:5000 is not allowed by Access-Control-Allow-Origin. 

沿着这些思路做一些简单的事情将是理想的。在上面的（尝试的）示例中，搜索结果将保留在屏幕上并被推入侧边栏，而 iFrame 将外部站点（在不同的域上）加载到页面的大部分中。

Angular 如何实现这一点？

额外警告：加载到 iFrame 中的链接是附属链接，因此它们之间通常会有一个“中间人”域，例如单击的链接将是mydomain.com/cloakinglink它重定向到www.zanox.com/whatever然后通向最终站点，www.asos.com/whatever.

至于 AngularJS 1.2，你应该使用$sce服务：

<iframe width="500" height="400" ng-src="{{detailFrame}}"></iframe>

$scope.detailFrame= $sce.trustAsResourceUrl("http://www.google.com");

祝你好运...