AngularJS - 寻找基于DOM事件添加和删除一个IFRAME [英] AngularJS - looking to add and remove an iframe based on dom events

问题描述

我想一个iframe添加到页面被点击某些链接时，并删除它时，其他的鼠标事件在页面上发生。从我所看到的，似乎用AngularJS指令将做到这一点的最好办法。什么我不知道是什么是格式化指令的最佳途径。我想在属性级别使得指令......是这样的：

 ＆LT; D​​IV＆myIframeDirective GT;＆LT; / DIV＆GT;
 

什么我不知道的是删除/添加指令的内容（一个iframe，它上面的标题）时，各种事件的点击主页上发生的最佳途径。不找人写的code我...只是寻找的这是如何实现的最佳例子。

解决方案

您应该使用 NG-如果。

 ＆LT; IFRAME SRC =htt​​p://www.example.com/NG-IF =showIframe＆GT;＆LT; / IFRAME＆GT;＆LT;按钮NG点击=showIframe = showIframe！＆gt;点击我要显示/隐藏的iframe＆LT; /按钮＆GT;
 

下面是一个工作示例：

\r

\r

VAR应用= angular.module（应用，[]）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
＆LT; D​​IV NG-应用=应用程序＆GT;\r
\r
＆LT; IFRAME SRC =htt​​p://www.example.com/NG-IF =showIframe＆GT;＆LT; / IFRAME＆GT;\r
\r
＆LT;按钮NG点击=showIframe = showIframe！＆gt;点击我要显示/隐藏的iframe＆LT; /按钮＆GT;\r
\r
＆LT; / DIV＆GT;

\r

\r

\r

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.

解决方案

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>

这篇关于AngularJS - 寻找基于DOM事件添加和删除一个IFRAME的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！