2017-02-08 3 views
0

Ich erstelle HTML von Bootstrap Modal zur Laufzeit und binde es wie unten gezeigt an Körper.Das Übergeben eines Objekts beim Erstellen von dynamischem HTML verursacht einen Fehler

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 verfügt über zwei Tasten ist Ja und zweite ist Keine. Beim Aufruf der Funktion zum Abrufen von HTML sende ich Ereignisse der beiden Buttons als Parameter und wenn ich HTML bekomme, binde ich es mit $compile an den Body. Es funktioniert gut, wenn ich kein Objekt als Ereignisparameter sende. Aber wenn das Objekt wird wie ticket.toString gesendet() es Fehler wirft folgende

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 wenn ich Objekte passieren, wie JSON.stringify (Ticket) es unter Fehler auslöst.

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":"paid","grandtotal":1213},"iseditmode":true})"="" data-dismiss="modal">

Unten ist der gesamte Code.

Funktion oben Funktion für Modal Aufruf 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(); 
     }, 

Ereignis, die aufgerufen wird, wann Benutzer auf Ja

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

Antwort

0

Die obige Zeichenfolge ist keine gültige Zeichenfolge, wie Sie kann doppelte Anführungszeichen innerhalb einer mit doppelten Anführungszeichen versehenen Zeichenfolge nicht entwirren.

Versuchen Sie Folgendes.

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