将对象传递给动态生成的html中的javascript函数

Question

I have run into a problem along these lines a couple of times now and rather than create a 'hack' work around I thought it best to ask is there a better way to handle a situation like this.

I am using angular datatables and on the datatable we have a cell with a clickable id which brings up a bootstrap modal.

I would like to pass in the full object of the item in the row on an ng-click action however it doesn't seem to work and I think it's caused by the object being awkwardly passed into the function which is some dynamically generated html:

Datatable:

$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;
    }

As you can see showModal('+full+') i believe appending the object this way is rendering it strangely in the html it displays as showModal([Object object]) is there any way to get this to work as currently clicking on this link does nothing, but passing in the id as an int raises the modal fine.

As a further similar experience I also noticed this same issue in my protractor testing. Saying:

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

produces an error along the lines of ID-[Object object] is not equal to ID-123456.

Is there some string concatenation issue I'm causing and is there a way to prevent it?

Thanks!

Answer 1

By pure chance I found the solution to this problem. Basically comes down to dynamic html rendering, to pass an object like above you must use JSON.Stringify() to convert to [Object object] into a json string which you can read the properties off.

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

Hope this helps someone.