Question

我认为这是：

<div contentEditable="true" ng-bind-html="message" style="clear:both;padding:10px;height:250px; font-family: arial, sans-serif; font-size: 13px; resize: none; overflow-y: scroll;border:rgb(229,229,229) solid 1px;margin-bottom:30px"></div>

并且在控制器功能中（控制器使用ngSanitize并定义了$ sce）：

_message = message.replace(new RegExp("{"+property+"}", 'g'), '<font style="background-color:rgba(0,255,103,.2);">'+property+'</font>');
$scope.message = _message;
$scope.message = $sce.trustAsHtml($scope.message);
console.log($scope.message);

但是我在角度方面得到了一些奇怪的错误：

TypeError：undefined不是函数在htmlParser（chrome-extension：//fpcnkepdihaljlahfnikcfdjombihalb/js/nova.js：10049：17）在$ sanitize（chrome-extension：//fpcnkepdihaljlahfnikcfdjombihalb/js/nova.js：9963：5）

...

如果我删除$sce.trustAsHtml()并仅使用未经过清理的版本，它会从刚添加的消息变量中的HTML中删除我的属性：

<font style="color:red;"></font>变为<font></font>，但它并没有崩溃。

有什么想法吗？（Angular 1.3.8）

Answer 1

最后，我必须编译动态生成的新HTML。我原本以为angular会为我编译它，但它显然不是这样做的。这是我使用的指令和最终视图代码：

`app.directive（＆＃34; compileHtml＆＃34;，function（$ parse，$ sce，$ compile）{ 返回{ 限制：＆＃34; A＆＃34;， link：function（范围，元素，属性）{

        var expression = $sce.parseAsHtml(attributes.compileHtml);

        var getResult = function () {
            return expression(scope);
        };

        scope.$watch(getResult, function (newValue) {
            var linker = $compile(newValue);
            if (element[0].children.length > 0) {
                element.empty();
                element.append(linker(scope));
            }
            else {
                element.append(linker(scope));
            }
        });
    }
}

}）;`

和视图：

<div contentEditable="true" compile-html="message" ng-bind-html="campaign.recipientMessage" style="clear:both;padding:10px;height:250px; font-family: arial, sans-serif; font-size: 13px; resize: none; overflow-y: scroll;border:rgb(229,229,229) solid 1px;margin-bottom:30px; margin-left:10px;"></div>

任何人都知道为什么需要这样做？这似乎非常hacky - 也许有更好的方法？

AngularJS ng-bind-html与sanitize在1.3.8中不起作用

1 个答案: