実行時にブートストラップの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;
}
モーダルは、1つのはい 2つのボタンを有し、第2は、なしあります。 HTMLを取得するための関数を呼び出す際に、両方のボタンのイベントをパラメータとして送信し、HTMLを取得すると、本体に$compileを使用してバインドします。イベントパラメータとしてオブジェクトを送信しないとうまく動作します。しかし、私は JSON.stringify（チケット）がエラーを下回るスローなどのオブジェクトを渡すとき、それはエラーに
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)
カロリーを以下のスロー オブジェクトが 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">
以下は全コードです。
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();
},
モーダルHTMLのための機能の上に呼び出す
機能ユーザーがはい
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();
}