javascript - 在 Modal 中动态添加 iFrame

Question

我对 AngularJs 非常陌生，我创建了一个非常漂亮的 Modal 工厂。我想要完成但无法弄清楚的是模式注入(inject)和 iFrame 的“文本”，以便我可以显示其他 HTML 页面。我希望能够调用我的工厂，然后指定 URL，工厂就会完成工作。我创建了一个 Plunker 来展示我所拥有的以及我尝试注入(inject) iFrame

http://plnkr.co/edit/KGz4rWXlxfbJmyzBBwyP?p=preview

<div class="modal-header">
            <h3 class="modal-title">{{alert_data.title}}</h3>
        </div>
        <div class="modal-body">
            <h3>{{alert_data.text}}</h3>
           <iframe src="http://www.w3schools.com"width="100%" height="100%"frameborder="0"></iframe>
        </div>
        <div class="modal-footer">

            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>

Answer 1

您已经将作用域传递给“alert_data”对象中的模式，因此只需附加它的 URL，将其作为参数在服务中公开，并将其绑定(bind)到 iframe src。

function alert(type, text, size, url) {
    var template = type === 'success' ? 'template-success.html' : 'template-error.html';

    var opts = {
        size : size || 'sm'
    };
    var data = {
        title : type === 'success' ? "OK" : "Ooops",
        text :  function(){return text},
        url: url
    };

    return openModal(template, data, opts);
}

然后在模板中:

<iframe ng-src="{{ alert_data.url }}" width="100%" height="100%" frameborder="0"></iframe>

您可能还必须使用 $sce 服务来信任该 URL。

var url = $sce.trustAsResourceUrl("http://www.w3schools.com");

以下是更新后的 Plunkr 示例:

http://plnkr.co/edit/d1OLRdhc6vKr6OZa6GkN?p=preview