Load Specific Div In Iframe From External Site In Angularjs

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 A

Solution 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:

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

or,

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

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

Plunker