Ui-sref does not work when creating dynamic content for data columns

Question

I would associate a column of my data table with a dynamic view of Angularjs.

Table 1 :

ID | Name | Action 

1  | Jack | Edit

Edit should be a link to # / clients / 1 / edit

/ clients /: id / edit (app.client_edit) has already been created and works.

I am trying the code below:

$scope.dataTableOpt = {
 "columnDefs": [
    {
       "targets": 0,
       "render": function ( data ) {
          return "<a ui-sref=\"app.client_view({id: $row[0]})\">Edit</a>";
       }
    }
 ],
 'ajax': 'http://localhost/admin/clients'
};

This result:

Link1 = < a ui-sref="app.client_view({'id': '1'})">edit</ a>

Expected Result:

Link2 = < a ui-sref="app.client_view({id: '1'})" class="ng-scope" href="#!/client/2">edit</ a>

When I set < a ui-sref="app.client_view({'id': '1'})">test< / a>the page statically, it worked, but I'm not sure why it does not work when it is dynamically generated.

Please inform.

Answer 1

my way:

DataTable Dataset Parameters:

"columnDefs": [
   {
      "targets": [0, 1],
      "render": function ( data, type, row ) {
         var href = $compile('<a ui-sref="stateName({id: ' + $stateParams.id + '})"></a>')($scope)[0].href;
         return '<a href="' + href + '">' + data + '</a>';
       }
    }
]

Answer 2

@Abbas Moazzemi

If used .withOption('createdRow'as shown below, you do not need to use $compile:

.withOption('createdRow', function(row) {
    // Recompiling so we can bind Angular directive to the DT
    $compile(angular.element(row).contents())($scope);
})