Question

我制作了一个模板构建器，最终使用一堆内联样式和ng-click链接将某个div的html保存到数据库中。

我尝试使用自定义指令在主容器div中渲染已保存的html，但我遇到了$ sce和$ compile一起玩的问题。

这是我的tpl指令

angular.module('hub').directive('tpl', ['$compile', '$parse', '$sce', function ($compile, $parse, $sce) {
  return {
    restrict: 'A',
    replace: true,
    link: function(scope, elem, attrs) {
      scope.$watch(attrs.tpl, function (html) {
        var parse = $sce.parseAsHtml(attrs.tpl);
        console.log(parse);//this is  function, but calling it returns undefined

        //this does not work! Just renders a blank container, no error in console
        //elem.html(parse);
        //this works, but throws an $sce error as unsafe
        elem.html($parse(attrs.tpl)(scope));
        $compile(elem.contents())(scope);
      });
    }
  }
}]);

调用指令的HTML

<div id="builder-stage">
  <div id="template-container"  tpl="formData.template.markupWide">
    <div class="template-inner" style="height: 776px;"></div>
  </div>
</div>

我可以通过忽略$ sce错误来解决这个问题，但即使我在服务器端清理保存的html，这也让我感到不安。

有人可以向我解释如何让这个$ sce.parseAsHtml行动起作用吗？

带有$ sce和$ compile的Angular指令

0 个答案: