我在運行時創建bootstrap Modal的HTML並將其綁定到body，如下所示。在創建動態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將它綁定到body。當我不發送任何對象作爲事件參數時，它工作正常。但是，當 它拋出以下錯誤
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)
英熱單位當我通過對象作爲 JSON.stringify（票）它拋出下面誤差對象發送像 ticket.toString（）。
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) <buttontype="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":"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();
}