CODEWITHSUNDEEP
angularjs
Zack Macomber
Zack Macomber

Reputation: 6905

AngularJS - looking to add and remove an iframe based on dom events

I would like to add an iframe to a page when certain links are clicked and remove it when other mouse events happen on the page. From what I can see, it seems that using an AngularJS directive would be the best way to do this. What I'm not sure about is what is the best way to format the directive. I'm thinking of making the directive at the attribute level...something like this:

<div myIframeDirective></div>

What I'm not sure of is the best way of removing/adding the directive contents (an iframe and a header above it) when various click events happen on the main page. Not looking for anyone to write the code for me...just looking for examples of how this can be best accomplished.

Upvotes: 0

Views: 7053

Answers (2)

Benoit Tremblay
Benoit Tremblay

Reputation: 728

In Angular, ng-if will remove the iframe from the DOM if it is false.

This means the URL will NOT be requested until ng-if is true.

<iframe ng-if="frameDisplayed" ng-src="{{src}}"></iframe>

And use the link

<a href="javascript:" ng-click="frameDisplayed = !frameDisplayed">Toggle</a>

Then in your controller, you can control what your iframe display:

$scope.src = 'https://angularjs.org';

Upvotes: -1

Patrick Reck
Patrick Reck

Reputation: 11374

You should be using ng-if.

<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>

<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>

Here's a working example: 

var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">

<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>

<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>

</div>

Upvotes: 3

Related Questions