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

Question

我在运行时创建Bootstrap Modal的HTML并将其绑定到主体，如下所示。

模态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;
    }

模态有两个按钮，一个是“是” ，第二个是“ 否” 。 在调用用于获取HTML的函数时，我将两个按钮的事件都作为参数发送，当获取HTML时，我使用$compile将其绑定到主体。 当我不发送任何对象作为事件参数时，它工作正常。 但是，当对象以ticket.toString（）的形式发送时，它将引发以下错误

错误：[$ parse：syntax]语法错误：令牌'Object'意外，期望[[Event]]位于表达式[PlanEventTicket.Events.CancelEditTicket（[object Object]）]的第49列，从[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 =对象％5D）

Btu当我将对象作为JSON.stringify（ticket）传递时，它抛出以下错误。

错误：[$ parse：ueoe]表达式的意外结束：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， “事件ID”：122， “ticketname”： “QWE”， “quantityavailable”：213， “tickettypeid”： “2”， “amountperticket”：1， “总金额” ：213，“ eventdescription”：“ 23”，“ startdatetime”：“ =”“ pm”，“ minimumticketallowedperorder”：1，“ maximumticketallowedperorder”：10，“ isactive”：true，“ tickettype”：“ p aid“，” grandtotal“：1213}，” iseditmode“：true}）” =“” data-dismiss =“ modal”>

下面是完整的代码。

为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();
        },

用户单击“打开”时将调用的事件

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

上面的字符串不是有效的字符串，因为在双引号引起来的字符串中不能有未转义的双引号。

请尝试以下方法。

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()");