如何基于 ng-model 是否为空创建 html 元素（iframe）？答案

【问题标题】：How to create an html element (iframe) based on ng-model empty or not?如何基于 ng-model 是否为空创建 html 元素（iframe）？
【发布时间】：2016-12-19 16:29:31
【问题描述】：

我有一个 iframe，它从输入元素的 ng-model 动态获取它的 src。现在我正在使用一个函数来检查 url 是否为空。如果为空，则设置 iframe 的 src “about:blank”。

但我的页面中有很多 iframe，因为它使用 ng-repeat 动态创建自己。当我想查看页面时，我的浏览器想要创建 about:blank iframe，我可以看到我的 chrome 的刷新和停止按钮一直闪烁一段时间。

为了防止这种情况，我想我必须检查 url 是否为空，不要创建 iframe 元素。如果是正确的，我该怎么做？

这是我的 Javascript 代码：

vm.getIframeSrc = function (id) {
    if (id == null || id == undefined){
        return "about:blank"
    }
    return 'https://www.youtube.com/embed/' + id + '?rel=0'
}

HTML：

<iframe ng-src="{{globalCtrl.getIframeSrc(uaCtrl.newMainExerciseVideoURL)}}"></iframe>

【问题讨论】：

你能提供一些代码来展示你正在尝试做什么，以及你为尝试修复它而编写的任何代码吗？
我们 ng-if - docs.angularjs.org/api/ng/directive/ngIf
@jessh 谢谢！这正是我正在寻找的。请写它作为答案，以提供帮助大家。再次感谢。

标签： javascript html angularjs iframe

【解决方案1】：

使用 ng-if 或 ng-show 并将其映射到您的标志，如下所示：

<iframe ng-if="id == null || id == undefined" ng-src="about:blank"></iframe>
<iframe ng-if="id != null && id != undefined" ng-src='https://www.youtube.com/embed/' + {{id}} + '?rel=0'></iframe>

【讨论】：