Creating angular directive to reuse code - parse error while creating html

Following the code snippet of the control that I am creating. This control is used in various places and the variables differ.

按照我正在创建的控件的代码片段。该控件用于各种地方,变量不同。

I am trying to write a directive to clean up code, but getting a parse error while inserting values near {{}}.

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

New to angular and not able to pin point what is it that I am missing. Please help.

角度新的,不能指出我错过的是什么。请帮忙。

track-edit is another directive.

track-edit是另一个指令。

Original control code:

原始控制代码:

<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>

Directive code

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 after directive:

指令后的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>

1 个解决方案

#1

I think your mistake is in this part:

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

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

It should be:

它应该是:

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

And in the directive:

在指令中:

<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>

You have idappend but you are referring as idAppend, which is wrong. You should refer to it as idappend. Same is applicable to fid and classname which should refer as it is with no camelcase format

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

EDIT CODE-

If you trusting origVal and currVal value then replace this statement :

如果您信任origVal和currVal值,则替换此语句:

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

with this one

有这个

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

Or you can use $sce like this one

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

$sce.parseAsHtml(your_data_value)

For more you can refer this one also. With ng-bind-html-unsafe removed, how do I inject HTML?

更多信息,您也可以参考这个。删除ng-bind-html-unsafe后,如何注入HTML?

#1