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

Question

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.

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:

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

score 1 · Answer 1 · edited May 23 '17 at 11:58

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

EDIT CODE-

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

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.parseAsHtml(your_data_value)

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

edited May 23 '17 at 11:58

Community

1
1

answered Jun 30 '15 at 11:29

RIYAJ KHAN

15,032
5
31
53

Note that idAppend would refer to id-append. – Billy Jun 30 '15 at 11:33
@Billy you are right. Here is sample code http://plnkr.co/edit/vP7wF03DJ0HP8w6953so?p=preview – RIYAJ KHAN Jun 30 '15 at 11:38
Changed to no camelcase, Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{origval}}|diff:{{currval}}] starting at [{origval}}|diff:{{currval}}] – user2412146 Jun 30 '15 at 11:38
Can you share the code for which produce origval and currval ? – RIYAJ KHAN Jun 30 '15 at 11:43
I have updated code.Please check this.It will solve your problem. – RIYAJ KHAN Jun 30 '15 at 11:59

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

1 Answers1