Question

我是AngularJs的新手，我创建了一个非常漂亮的Modal工厂。我想要完成的并且无法弄明白的是＆＃34;文本＆＃34;对于模态注入和iFrame，我可以显示其他HTML页面。我希望能够只调用我的工厂，然后只需指定URL，工厂就可以完成工作了。我已经创建了一个Plunker来显示我的内容以及我尝试注入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，将其作为参数在服务中公开并将其绑定到iframe src。

foreach ($REQUESTITEM?? as $???){
   ???
}

然后在模板中：

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);
}

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

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

这是一个更新的Plunkr作为例子：

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

Answer 2

您可以像ng-src一样使用this。

请注意，您需要通过调用src将$sce.trustAsResourceUrl()设置为受信任者（有关其原因，请参阅this link）。第27行及以下：

controller: function ($scope, $uibModalInstance, $sce, alert_data) {
      $scope.alert_data = alert_data;
      $scope.iframeSrc = $sce.trustAsResourceUrl("http://www.w3schools.com");

Answer 3

js粘贴iframe：

var iframe = document.createElement('iframe');
        iframe.setAttribute("src", "https://www.youtube.com/embed/test");
        iframe.setAttribute("width", "100%");
        iframe.setAttribute("height", "315");
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        document.getElementById("wrapper_video").appendChild(iframe);

在html中粘贴你需要注入$ sce

return $sce.trustAsHtml(iframe);

在模态中动态添加iFrame

3 个答案: