0

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/">
GeekOnGadgets
  • 941
  • 3
  • 14
  • 47

1 Answers1

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

New Dev
  • 48,427
  • 12
  • 87
  • 129
  • Thanks for putting so much time in this. I will give this a try :). – GeekOnGadgets Oct 20 '14 at 20:52
  • I tried it out but somehow
    does not work,neither it gives out any error in console. Does it worked for you ?     – GeekOnGadgets Oct 20 '14 at 23:56
  • thanks :). One last question- For instance I make a ajax call to external URL and get the content of the website. Will this be useful as this is finding DOM in the HTML templates?. I am getting everything in Angular Controller and can see DOM of external URL , what i want to do now is just get specific Form ID and display in my page. Is this something you can help me with please? – GeekOnGadgets Oct 21 '14 at 00:32
  • That sounds like a separate question and probably needs more details. Short of that, you could follow the concepts in my answer to solve this case. – New Dev Oct 21 '14 at 01:08
  • yup, I have been trying but only problem is could not get the Form displayed from controller to view. Thanks for your help :) – GeekOnGadgets Oct 21 '14 at 01:11
  • Hi I created new question. If you have a time please have a look.http://stackoverflow.com/questions/26477958/display-div-from-response-in-angularjs thanks :) – GeekOnGadgets Oct 21 '14 at 02:30