javascript - 创建 Angular Directive(指令)以重用代码 - 创建 html 时解析错误

Question

遵循我正在创建的控件的代码片段。这个控件用在不同的地方，变量也不同。

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

刚接触 Angular ，无法确定我错过了什么。请帮忙。

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 ，它们应该引用，因为它没有驼峰格式

编辑代码-

如果您信任 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?