从AngularJs中的外部站点加载iframe中的特定div

Question

问题问题 -

如何将外部网站的特定 div 加载到 iframe 中？我知道同源政策和外部站点属于我。我将如何在 AngularJs 中做到这一点。

我找了这个，但大多数答案都只在 jQuery 中。

感谢您的帮助

更新 1

让我更具体一点。例如，如果您使用 iframe，它可以让您访问所有内容。但我只想要这个外部 URL 的特定 DIV。

<iframe style="border: 0" width="800" height="600" frameborder="0" scrolling="no" src="http://localhost:8888/">

Answer 1

通常，盲目而轻率地使用 jQuery 不会很好地与 Angular 配合使用。这与其说是因为 jQuery - 这个库，还不如说是因为 Angular 和 jQuery 促进了不同的编程范式。

不过，jQuery 是一个工具箱，jQuery.load() 就是一个这样的工具。

在我看来，让它与 Angular 一起工作的最佳方法是创建一个使用 jQuery.load() 的指令：

.directive("load", function($compile){
  return {
    restrict: "A",
    scope: true,
    link: function(scope, elem, attrs){

      attrs.$observe('load', function(newValue){
        elem.load(newValue, null, function(){

          // compile the newly imported div
          $compile(elem.contents())(scope);

          // need to force $digest, since this is outside of Angular digest cycle
          scope.$digest();
        });
      });
    }
  };
});

那么你可以像这样使用它：

<div load="foo.html #id"></div>

或者，

<div load="{{urlWithId}}"></div>

一定要在Angular之前加载jQuery，否则.load将不会被定义。

Plunker