0

I am implementing data table and displaying some icon in the column. And putting ng-click in the font-awesome icon. But ng-click is not working.

Controller:

  this.standardOptions = DTOptionsBuilder

  .fromFnPromise(Rl.all('xyz/abc').getList())     
  .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
  "t" +
  "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
  .withBootstrap();   

  function actionRenderer(data) {  // inject $sce if required.
    console.log(data);
    return $sce.trustAsHtml('<i class="fa fa-repeat cursor-pointer" aria-hidden="true" ng-click="volume()"></i> </a>');
  }

  this.standardColumns = [  
   DTColumnBuilder.newColumn('id').renderWith(actionRenderer),    
  ];

function volume(){
  alert("-----");
}

HTML

<div class="widget-body no-padding">
     <table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%">
         <thead>
            <tr>                        
              <th>Refresh</th>
            </tr>
          </thead>
      </table>
</div>

I putted ng-click="volume()" But it is not working. I have seen links but in these links mentioned ng-bind-html in html page. But in my code I am not coding in html page. Only from java-script append the icon.
1.After using $sce.trustAsHtml, ng-click not working
2.Accessing ng-click when rendered via $sce.trustAsHtml

I am only hard code the column heading like Refresh. And definition append by javascript.

Varun Sharma
  • 4,632
  • 13
  • 49
  • 103
  • 1
    You need to use $compile. Angular has to compile the HTML first – Vivz Aug 16 '17 at 12:47
  • @Vivz. Where should I use $compile. I am new in Angular js – Varun Sharma Aug 16 '17 at 12:47
  • Check https://stackoverflow.com/questions/20297638/call-function-inside-sce-trustashtml-string-in-angular-js and https://stackoverflow.com/questions/20623118/rendering-directives-within-sce-trustashtml – Vivz Aug 16 '17 at 12:49
  • 1
    Possible duplicate of [Rendering directives within $sce.trustAsHtml](https://stackoverflow.com/questions/20623118/rendering-directives-within-sce-trustashtml) – Vivz Aug 16 '17 at 12:50
  • @Vivz My code is differ. I already mentioned in these link using ng-bind-html. But I am not using any html code for data definition in html page – Varun Sharma Aug 16 '17 at 12:51
  • But still the angular directives won't compile if you don't do the above way. – Vivz Aug 16 '17 at 12:53

0 Answers0