0

I am trying to add dynamically an anchor tag link in datatable, tag is added but ng-click event not working.

my angularjs code:

listApp.controller('mylistctr', ['$scope', '$timeout', '$compile', function ($scope, $timeout, $compile) {
 $timeout(function () {
    if (!$.fn.dataTable) return;

    dtInstance1 = $('#datatable1').dataTable({
        'paging': true,  // Table pagination
        'ordering': true,  // Column ordering 
        'info': true,  // Bottom left status text
        sAjaxSource: '/AutomationFX/api/clusters/phones/phonelist',
        aoColumns: [
          { mData: 'column1' },
          { mData: 'column2' },
          { mData: 'column3' },
          { mData: 'column4' },
          { mData: 'column5' }
        ], "aoColumnDefs": [{
            "aTargets": [4],
            "mRender": function (data, type, full) {
                return '<a ng-click="openWindow('+data+')"><img src="app/img/a.png"/></a>';

            }
        }]
    });

});
});

My html

<div class="table-responsive">
                <table id="datatable1" class="table table-striped">
                    <thead>
                        <tr></tr>
                    <th style="width:15%">Name</th>
                    <th style="width:15%">LastName</th>
                    <th style="width:15%">Contact</th>
                    <th style="width:45%">Desc</th>
                    <th style="width:10%">Action</th>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

so far I have found that I have to compile dynamic html, but i have not found right solution yet.

Improve this question
8
  • You can use $compile service wrapping it into a directive, see this stackoverflow.com/questions/15279244/… Commented Aug 26, 2015 at 5:44
  • not duplicate, i have already checked that i am looking to compile element in datatable inside Commented Aug 26, 2015 at 5:59
  • Try return $compile( '<a ng-click="openWindow('+data+')"><img src="app/img/a.png"/></a>')($scope); Commented Aug 26, 2015 at 6:20
  • @AmitArya you must have missed something while doing compiling element Commented Aug 26, 2015 at 6:22
  • @AmitArya Try return $compile('a>...</a>')($scope)[0].innerHTML; Commented Aug 26, 2015 at 7:03
Related questions
2974
How do I detect a click outside an element?
2051
How does data binding work in AngularJS?
2762
How do I refresh a page using JavaScript?
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.