How to use iframe in angularJS

Question

I want to change the scrollTop iframe after loading. this is my idea.

in the template

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

in the controller

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

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

What is the best practice?

Answer 1

here is mycode. but cross-domain does not work.

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

  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 the controller ($ sce injected):

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

and in .html:

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

Answer 3

Something like this should work, just use my-frame='loaded()' in your iframe tag, and it should work. It is untested, and I assume that the load function is called after the frame loads. If this does not work, perhaps ready will work.

 .directive('myFrame',function(){ return { link:function(scope,ele,attrs){ ele.load(function(){ scope.$apply(attrs.myFrame); }); } }; });