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

Question

我正在运行时创建引导模式的 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;
    }

Modal 有两个按钮，一个是 Yes，第二个是 No。在调用获取 HTML 的函数时，我将两个按钮的事件作为参数发送，当我获取 HTML 时，我使用 $compile 将其绑定到正文。当我不发送任何对象作为事件参数时，它工作正常。但是当对象被发送时 ticket.toString() 它会引发以下错误

错误：[$parse:syntax] 语法错误：令牌“对象”是意外的，在表达式 [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=Object%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","开始日期时间":"="" 日期(1486456200000)="" ","enddatetime":"="" 日期(1486470600000)="" ","utcstartdatetime":"="" 日期(1486427400000)="" ","utcenddatetime":"="" 日期(1486441800000)="" ","开始日期":"二月=""07=""2017","开始时间":"02:00="" 下午","结束日期":"二月=""2017","结束时间":"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","开始日期时间":"="" pm","minimumticketallowedperorder":1,"maximumticketallowedperorder":10,"isactive":true,"tickettype":"paid","grandtotal":1213},"iseditmode":true})"="" data-dismiss="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()");