CODEWITHSUNDEEP
javascriptangularjsiframeangularjs-directive
Koder
Koder

Reputation: 1924

AngularJS directive for updating IFrame's body

I would like to bind a model property to an iframe's body.

With jQuery, The logic would have to be written something like

$('iframe').contents().find('body').html('<p>Hello</p>');

Ideally, i would like the AngularJS directive to be something like..

<myframe body="model.safehtml"></myframe>

Can anyone point me in the right direction?

Thanks

Upvotes: 1

Views: 503

Answers (1)

mb21
mb21

Reputation: 39528

You can change the DOM in the link function of a Angular directive.

app.directive('myframe', function($compile) {
  return {
    restrict: 'E',
    scope: {
        body: '='
    },
    template: "<iframe></iframe>",
    link: function(scope, elm, attrs) {
        elm.find('iframe').contents().find('body').html(scope.body);
    }
  };
});

Upvotes: 3

Related Questions