在创建动态HTML时传递对象会引发错误

Question

I am creating HTML of bootstrap Modal at run time and binding it to body as shown below.

Modal Html

function GetConfirmationModalHtml(HeaderMessage, Message,YesEvent, Noevent) {
        var html = '<div id="clearModal"><div class="modal fade confirmation-modal" id="myModal" data-backdrop="static" role="dialog" style="display:block; opacity:1;">'
+ '<div class="modal-dialog vertcial-center modal-sm">'
+ '<div class="modal-content">'
+ '<div class="modal-header">'

  + '<h4 class="modal-title">' + HeaderMessage + '</h4>'
+ '</div>'
+ '<div class="modal-body">'
  + '<p>' + Message + '</p>'
+ '</div>'
+ '<div class="modal-footer">'
+ '          <button type="button" class="btn btn-default btn-confirmation-yes" ng-click="' + YesEvent + '" data-dismiss="modal">Yes</button>'
+ '          <button type="button" class="btn btn-default btn-confirmation-no" ng-click="' + Noevent + '" data-dismiss="modal">No</button>'
+ '      </div>'
+ '  </div>'
+ '</div>'
+ '</div></div>';

        return html;
    }

Modal has two buttons one is Yes and second is No . While calling function for getting HTML I am sending events of both buttons as parameters and when I get HTML I bind it using $compile to the body. It works fine when I don't send any object as a events parameters. But when object is sent like ticket.toString() it throws following error

Error: [$parse:syntax] Syntax Error: Token 'Object' is unexpected, expecting []] at column 49 of the expression [PlanEventTicket.Events.CancelEditTicket([object Object])] starting at [Object])]. http://errors.angularjs.org/1.5.8/ $parse/syntax?p0=Object&p1=is%20unexpecte…ing%20%5B%5D%5D&p2=49&p3=PlanEventTicket.Events.CancelEditTicket(%5Bobjectbject%5D)&p4=Object%5D)

Btu when I pass objects as JSON.stringify(ticket) it throws below error.

Error: [$parse:ueoe] Unexpected end of expression: PlanEventTicket.Events.CancelEditTicket({ http://errors.angularjs.org/1.5.8/ $parse/ueoe?p0=PlanEventTicket.Events.CancelEditTicket(%7B

 at http://localhost:2053/Scripts/js/angular.js:68:12 at AST.peekToken (http://localhost:2053/Scripts/js/angular.js:14574:13) at AST.object (http://localhost:2053/Scripts/js/angular.js:14515:14) at AST.primary (http://localhost:2053/Scripts/js/angular.js:14433:22) at AST.unary (http://localhost:2053/Scripts/js/angular.js:14421:19) at AST.multiplicative (http://localhost:2053/Scripts/js/angular.js:14408:21) at AST.additive (http://localhost:2053/Scripts/js/angular.js:14399:21) at AST.relational (http://localhost:2053/Scripts/js/angular.js:14390:21) at AST.equality (http://localhost:2053/Scripts/js/angular.js:14381:21) at AST.logicalAND (http://localhost:2053/Scripts/js/angular.js:14373:21) <button 

type="button" class="btn btn-default btn-confirmation-yes" ng-click="PlanEventTicket.Events.CancelEditTicket({" ticketid":25,"eventid":122,"ticketname":"qwe","quantityavailable":213,"tickettypeid":"2","amountperticket":1,"totalamount":213,"eventdescription":"23","startdatetime":"="" date(1486456200000)="" ","enddatetime":"="" date(1486470600000)="" ","utcstartdatetime":"="" date(1486427400000)="" ","utcenddatetime":"="" date(1486441800000)="" ","startdate":"february="" 07="" 2017","starttime":"02:00="" pm","enddate":"february="" 2017","endtime":"06:00="" pm","minimumticketallowedperorder":1,"maximumticketallowedperorder":10,"isactive":true,"tickettype":"paid","grandtotal":1213,"$$hashkey":"object:326","copyobject":{"ticketid":25,"eventid":122,"ticketname":"qwe","quantityavailable":213,"tickettypeid":"2","amountperticket":1,"totalamount":213,"eventdescription":"23","startdatetime":"="" pm","minimumticketallowedperorder":1,"maximumticketallowedperorder":10,"isactive":true,"tickettype":"p aid","grandtotal":1213},"iseditmode":true})"="" data-dismiss="modal">

Below is whole code.

Function calling above function for Modal HTML

CancelEditTicketConfirmation: function (ticket) {
            var html = GetConfirmationModalHtml('Confirmation', 'Some ticket(s) are in edit mode. Do you want to continue without saving their records ?', "PlanEventTicket.Events.CancelEditTicket(" + JSON.stringify(ticket) + ")", "NoEvent()");
            $('body').append($compile(html)($scope));
            alignModal();
        },

Event which will be called when User will click On Yes

CancelEditTicket: function (ticket) {
            ticket.TicketName = ticket.copyObject.TicketName;
            ticket.QuantityAvailable = ticket.copyObject.QuantityAvailable;
            ticket.TicketTypeId = ticket.copyObject.TicketTypeId;
            ticket.AmountPerTicket = ticket.copyObject.AmountPerTicket;
            $('#clearModal').remove();
        }

Answer 1

The string above is not a valid string as you can't have unescaped double quotes inside a double quote-wrapped string.

Try the following.

var html = GetConfirmationModalHtml('Confirmation', 'Some ticket(s) are in edit mode. Do you want to continue without saving their records ?', "PlanEventTicket.Events.CancelEditTicket('" + JSON.stringify(ticket) + "')", "NoEvent()");