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

我已经遇到了一些问题，现在已经有好几次了，而不是创建一个'hack'工作，我认为最好问一下是否有更好的方法来处理像这样的情况。将对象传递给动态生成的html中的javascript函数

我正在使用角度数据表，并在数据表中我们有一个可点击的id单元格，它提供了一个引导模式。

我想通过一个ng-click动作在行中传递项目的完整对象，但它似乎不工作，我认为这是由对象被笨拙地传递到函数中引起的动态生成的html：

数据表：

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

正如你所看到的ShowModal（ '+全+'）我相信追加OBJE ct这种方式在它显示的html中显示为奇怪，因为showModal（[Object object]）有没有什么办法可以使它工作，因为当前点击这个链接什么都不做，但是将id作为int传入会引发模态罚款。

作为更进一步的类似经验，我在量角器测试中也注意到了同样的问题。说：

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

产生一个错误沿着ID- [对象对象]不等于ID-123456。

是否有一些字符串串联问题，我造成的，有没有办法阻止它？

谢谢！

来源

2017-05-11 Rebecca Douglas

您是否重新发明了角度指令的概念？ –

我确实记得指令+ angular-datatables在过去是一种痛苦，但它可能适用于此，我会放弃它。有什么关于有意义改变的测试？ –

在你的测试中检查一件事是为什么当你期望一个数字时，'id'是一个对象。 –

纯粹的机会，我找到了解决这个问题的办法。基本上归结为动态html渲染，要传递上面的对象，您必须使用JSON.Stringify（）将[Object object]转换为可以读取属性的json字符串。

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

希望这可以帮助别人。

来源

2017-12-08 13:21:13

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

回答

相关问题