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

Question

Problem Question -

How to load a specific div from the external site into the iframe? I am aware of the Same Origin Policy and external Site belongs to me. How would I do this in AngularJs.

I looked for this but most of the answers are in jQuery only.

Thanks for the help

Update 1

Let me be more specific. For instance if you use iframe, it gives you access to everything. But I only want a Particular DIV of of this external URL.

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

Answer 1

Typically, blindly and thoughtlessly using jQuery will not play nice with Angular. This is not so much because of jQuery - the library, but more so because Angular and jQuery promote different programming paradigms.

Nevertheless, jQuery is a toolbox, and one such tool is jQuery.load() .

The best way, in my mind, to make it work with Angular is to create a directive that uses 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();
        });
      });
    }
  };
});

Then you could use it like so:

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

or,

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

Be sure to load jQuery before Angular, otherwise .load will not be defined.

Plunker