AngularJS中的自定义属性设置器

Question

我有一个iframe，它的内容应该绑定到一个控制器函数。我试着

<iframe ng-bind-html-unsafe="selectedMessage.content()"></iframe>

但不幸的是它似乎不起作用。将内容写入iframe的正确方法是访问iframe DOM元素并调用ifrmElem.contentDocument.write(s)。

我怎样才能做到这一点?

Answer 1

您可以通过在属性上设置监视器，然后在需要时手动更新iframe来实现这一点。

下面的例子使用跨浏览器的iframe内容选择。

参见jsFiddle: http://jsfiddle.net/uyLNY/2/

$scope.$watch('data.content', function(oldValue, newValue) {
    var ifrm = $element.find('iframe')[0];
    ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;       
    ifrm.document.open();
    ifrm.document.write(newValue);
    ifrm.document.close();
});

但是值得注意的是，我不确定这样做的性能，如果你要写大量的内容

Answer 2

这是一个plnkr: http://plnkr.co/edit/LG7p1AG7yhVKyLXgMX4Q?p=preview

Javascript

  $scope.content= "";
  $scope.fillFrame = function(id) {
    document.getElementById(id).contentDocument.write($scope.content);  
  };

HTML

 <strong>Enter some html</strong>
    <br/>
    <textarea ng-model="content"></textarea>
    <button ng-click="fillFrame('frame')">Fill iFrame</button>