Übergeben Sie Objekt an JavaScript-Funktion in dynamisch generierten HTML

Question

Ich habe ein Problem in diesen Zeilen ein paar Mal jetzt und eher als ein 'hack' arbeiten um zu arbeiten Ich dachte, es ist am besten zu fragen, gibt es einen besseren Weg, um eine zu behandeln Situation wie diese.

Ich verwende eckige Databases und auf der Datentabelle haben wir eine Zelle mit einer anklickbaren ID, die ein Bootstrap-Modal hervorbringt.

Ich möchte das vollständige Objekt des Elements in der Zeile auf eine ng-Klick-Aktion übergeben, aber es scheint nicht zu funktionieren, und ich denke, dass es durch das Objekt verursacht wird ungeschickt in die Funktion, die einige ist dynamisch generierte hTML:

Datentabelle:

$scope.dtColumns = [DTColumnBuilder.newColumn('Id').withTitle('Id').renderWith(CommonService.renderId), 
          DTColumnBuilder.newColumn('status').withTitle('Status').renderWith(CommonService.renderStatus), 
          DTColumnBuilder.newColumn('description').withTitle('Description').renderWith(CommonService.renderLength), 
          DTColumnBuilder.newColumn('rating').withTitle('Rating').withOption('type', 'rating'), 
          DTColumnBuilder.newColumn('date').withTitle('Date'), 
          DTColumnBuilder.newColumn("category").withTitle('Category').renderWith(CommonService.renderLength), 
          DTColumnBuilder.newColumn("subcategory").withTitle('Sub Category').renderWith(CommonService.renderLength)]; 

CommonService:

function renderId(data, type, full, meta){ 

     var render = "ID-"+data; 

     //'hack' function to store object for later lookup 
     setObjectForModal(full); 

     //Dynamically generated html to apply link on id with ng-click function which passes in 'full' object 

     var html = ' <span class="link" ng-click="showModal('+full+')" > ' + render + ' </span> '; 

     return html; 
    } 

Wie Sie ShowModal sehen können ('+ full +') i die obje glauben Anhängen Auf diese Weise wird es merkwürdigerweise im HTML-Code gerendert, den es als showModal anzeigt ([Object object]). Gibt es eine Möglichkeit, dies zum Laufen zu bringen, da das Klicken auf diesen Link nichts bewirkt, aber die ID als int erhöht die Modalität .

Als weitere ähnliche Erfahrung habe ich das gleiche Problem in meinem Winkelmesser-Test festgestellt. Nämlich:

expect('ID-'+id).toEqual(ID-123456); 

einen Fehler entlang der Linien von ID- produziert [Object Objekt] nicht gleich ID-123456.

Gibt es einige String Verkettung Problem, das ich verursache und gibt es eine Möglichkeit, es zu verhindern?

Danke!

Answer 1

Zufällig fand ich die Lösung für dieses Problem. Im Grunde geht es um dynamisches HTML-Rendering. Um ein Objekt wie oben zu übergeben, müssen Sie JSON.Stringify() verwenden, um es in [Object object] in eine JSON-Zeichenkette umzuwandeln, von der Sie die Eigenschaften ablesen können.

function renderId(data, type, full, meta){ 

    var render = "ID-"+data; 

    //'hack' function to store object for later lookup 
    setObjectForModal(full); 

    //Dynamically generated html to apply link on id with ng-click function which passes in 'full' object 

    var html = ' <span class="link" ng-click="showModal('+ JSON.stringify(full) +')" > ' + render + ' </span> '; 

    return html; 
} 

Hoffe, das hilft jemandem.