Question

我正在尝试使用$compile将用户提供的HTML注入指令。

module.directive('foo', ["$compile", function($compile) {
    return {
        // ...
        link: function($scope, el) {
            // ...
            var userHtml = userConfigObject.content;
            var compiledHtml = $compile(userHtml)($scope);
            myElement.innerContent.html(compiledHtml);
        }
    };
 }]);

我想允许用户注入字符串（例如"Let's party!"）或某些HTML（例如'<div ng-click="foo()">Click to party!</div>'）。

但是，当用户仅提供带引号的字符串（或任何其他“无效HTML”）时，$compile语句会出现以下错误：

语法错误，无法识别的表达式：让我们聚会！

（这个错误最终来自jQuery的Sizzle逻辑）。

我能想到解决这个问题的唯一方法（同时仍允许非HTML和HTML字符串）正在使用它。

var stepHtml = '<div>' + userConfigObject.content + '</div>';

以便$compile始终收到有效的HTML字符串。但是，我宁愿不必将内容包装在div。

中

无效的解决方案

我尝试事先转义用户内容（用HTML代码替换引号），但这不起作用。

我也尝试使用$sanitize认为它会逃避字符或其他东西，但这也不起作用。

最后，当我使用ng-click时，$interpolate属性无效。

关于如何在非HTML字符串上使用$compile的任何想法？或者我是以错误的方式看待这个？

Answer 1

如果用户实际上正在输入ng-click等指令，那么您可以看到html中是否包含元素：

var userHtml = userConfigObject.content;
var $tempDiv  = angular.element('<div>').html(userHtml);
if(!$tempDiv.children().length){
  userHtml = $tempDiv 
}

var compiledHtml = $compile(userHtml)($scope);
myElement.innerContent.html(compiledHtml);

如果文本节点与根中的元素混合在一起，那么最好的选择就是总是包装在容器中

对于带引号

无效的解决方案

1 个答案: