Question

按照我正在创建的控件的代码段。此控件用于各种位置，变量不同。

我正在尝试编写一个清除代码的指令，但在{{}}附近插入值时会出现解析错误。

角度新的，无法确定我缺少的是什么。请帮忙。

track-edit是另一个指令。

原始控制代码：

<div id="text-wrapper">
                    <div track-edit="true" id="Type1Desc_{{t1Card.id}}" class="textbody" ng-blur="SaveDesc('Type1Desc_'+t1Card.id,t1Card.Description,'Type1')">
                        <div>
                            <p><div spellcheck="true"  ng-bind-html="t1Card.OrigDescription|diff:t1Card.Description"></div></p>
                        </div>
                    </div>
                </div>

指令代码

app.directive('customEditor', function () {
    return {
        restrict: "E",
        scope: {
            fId: "@",
            idAppend: "@",
            className: "@",
            origVal: "@",
            currVal: "@"
        },
        replace: true,
        transclude: false
        template: ' <div id="text-wrapper"><div track-edit="true" id="{{idAppend}}_{{fId}}" ' +
        'class="{{className}}" ><div><p>' +
        '<div spellcheck="true"  ng-bind-html="{{origVal}}|diff:{{currVal}}"></div></p></div></div></div>',
        link: function (scope, element, attrs) {

        }
    }
});

指令后的HTML：

 <custom-editor fid="{{t1Card.id}}" idappend="Type1Desc" classname="textbody" ng-blur="SaveLineItemDesc('Type1Desc_'+t1Card.id,t1Card.Description,'Type1')" origVal="{{t1Card.OrigDescription}}" currVal="{{t1Card.Description}}">
 </custom-editor>

Answer 1

我认为你的错误在于这部分：

fId: "@",
idAppend: "@",
className: "@",
origVal: "@",
currVal: "@"

应该是：

fid: "@",
idappend: "@",
classname: "@",
origVal: "@",
currVal: "@"

在指令中：

<custom-editor fid="{{t1Card.id}}" idappend="Type1Desc" classname="textbody" ng-blur="SaveLineItemDesc('Type1Desc_'+t1Card.id,t1Card.Description,'Type1')" origVal="{{t1Card.OrigDescription}}" currVal="{{t1Card.Description}}">
 </custom-editor>

您有 idappend ，但您指的是 idAppend ，这是错误的。您应该将其称为 idappend 。同样适用于 fid 和 classname ，它应该引用，因为它没有camelcase格式

编辑代码 -

如果您信任 origVal 和 currVal 值，请替换此声明：

ng-bind-html="{{origVal}}|diff:{{currVal}}"

这一个

ng-bind-html-unsafe="{{origVal}}|diff:{{currVal}}"

或者你可以像这样使用$sce

$sce.parseAsHtml(your_data_value)

更多信息，您也可以参考这个。 With ng-bind-html-unsafe removed, how do I inject HTML?

创建angular指令以重用代码 - 在创建html时解析错误

1 个答案: