how to use iframe in angularJS

Question

I want to change scrollTop of iframe after load. this is my idea.

in template

<iframe .. onload="{{loaded()}}" ..></iframe>

in controller

$scope.loaded = function() {
    //chage scroll of iframe
}

but I think this is not angular style("Do not Any kind of DOM manipulation")

what is the best practice do this?

Answer 1

here is mycode. but cross-domain is not working..

directive('myIframe', function(){
    var linkFn = function(scope, element, attrs) {
        element.find('iframe').bind('load', function (event) {
          event.target.contentWindow.scrollTo(0,400);
        });
    };
    return {
      restrict: 'EA',
      scope: {
        src:'@src',
        height: '@height',
        width: '@width',
        scrolling: '@scrolling'
      },
      template: '<iframe class="frame" height="{{height}}" width="{{width}}" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="{{scrolling}}" src="{{src}}"></iframe>',
      link : linkFn
    };
  });

Answer 2

This is a workaround to avoid cross domain problems:

  directive('myIframe', function(){
    var linkFn = function(scope, element, attrs) {
        element.find('iframe').bind('load', function (event) {
          event.target.contentWindow.scrollTo(0,400);
        });
    };
    return {
      restrict: 'EA',
      scope: {
        src:'&src',
        height: '@height',
        width: '@width',
        scrolling: '@scrolling'
      },
      template: '<iframe class="frame" height="{{height}}" width="{{width}}" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="{{scrolling}}" src="{{src()}}"></iframe>',
      link : linkFn
    };
  });

in controller ($sce injected):

$scope.getSrc = function() {
  return $sce.trustAsResourceUrl("http://example.com");
};

and in .html:

<my-iframe src='getSrc()'>