分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 将html内容附加到Angular JS中的iframe，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在尝试创建一个完整的html文档的预览,这意味着这个html内容本身就是一个完整的html文档,其中包含< html>,< head>,< body>标签.

如果我只是将该html文档加载到我现有的html根目录中,那么所有样式都将被新包含的html doc中定义的样式覆盖.如果我将这个带有iframe的html文档包含在src(< ifram e src =“path / to / doc.html”>)上,那么它可以工作.但是,这个doc.html是一个模板,我需要替换我用自定义标签注释的某些部分.我这样做是通过执行以下代码

$.get('template/template.html',function (templatE) {

    String.prototype.format = function () {
        var args = arguments;
        thiS.Unkeyed_index = 0;
        return this.replace(/\{(\w*)\}/g,function (match,key) {
            if (key === '') {
                key = thiS.Unkeyed_index;
                thiS.Unkeyed_index++
            }
            if (key == +key) {
                return args[key] !== 'undefined'
                    ? args[key]
                    : match;
            } else {
                for (var i = 0; i < args.length; i++) {
                    if (typeof args[i] === 'object' && typeof args[i][key] !== 'undefined') {
                        return args[i][key];
                    }
                }
                return match;
            }
        }.bind(this));
    };

    var renderedHtml = template.format({Hello: "hey there"});
});

到目前为止这个工作正常.在变量renderedHtml中,我有完整的html文档,占位符正在被替换(在这种情况下,占位符问候语被替换为“嘿那里”.

不,我有以下的html片段

<iframe id="test"></iframe>

我尝试了以下代码：

var elem = document.createElement('div');
  elem.innerHTML = renderedHtml;
  document.getElementById('test').appendChild(elem);
  $compile(elem)($scopE);

不幸的是,视图没有任何变化.但是,如果我在document.body上调用appendChild(elem),那么它可以工作.有谁知道是什么问题？

附：我知道你不应该在角度控制器中进行DOM操作,而不是$compile,你应该用指令来做.但是,如果这种方式有效,那么我很乐意尝试将其重构为指令:).

解决方法

我必须做一些与你正在做的事情类似的事情.我需要为一些HTML模板创建一个编辑器.由于现有网站中的CSS,模板无法预览,所以我想在iframe中显示模板.

我能够制作一个带有手表的角度指令,它会更新：iframe.contentDocument.body.innerHTML并得到了我想要的效果.我相信您可以截取此处的内容,并在模板中替换占位符.

如果您在所有这段时间后仍然需要它,下面的预览指令应该可以帮助您.

var app = angular.module('App',[]);

app.controller("Cont",function($scopE){
  $scope.content = "Hi there!";
});

app.directive("preview",function () {
  function link(scope,element) {
    var iframe = document.createElement('iframe');
    var element0 = element[0];
    element0.appendChild(iframE);
    var body = iframe.contentDocument.body;

    scope.$watch('content',function () {
      body.innerHTML = scope.content;
    });
  }

  return {
    link: link,reStrict: 'E',scope: {
      content: '='
    }
  };
});

input,iframe {
  border: solid 1px black;
  width: 100px;
}
preview iframe {
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="Cont">
  <input ng-model="content" type="text" /><br />
  <preview content="content"></preview>
</div>