Verwenden von ng-click in einer gerenderten Spalte von Datatable

Ich verwende eine einfache Datatable in AngularJS (keine Angular-Datatable-Bibliotheken verwenden). Bis auf eine Sache scheint alles gut zu sein.Verwenden von ng-click in einer gerenderten Spalte von Datatable

Ich habe diese Datentabelle:

$scope.siInfoTable = $('#siInfoTable').DataTable({ 
      'columns': [ 
       { 
        "render": function (data, type, row, meta) { 
         data = '<button class="btn btn-primary btn-sm" ng-click="test()">TEST</button>'; 
         return data; 
        } 
       }] 
     });

Dieses in einem $scope.load Verfahren ausgeführt wird und geladen wird, bevor die Seite gerendert wird. Wenn ein Benutzer auf die gerenderte Schaltfläche in der Datentabelle klickt, scheint es die ng-click Direktive nicht zu erkennen.

Gibt es hier einen Weg?

Quelle

2017-10-06 christianleroy

Ich würde vorschlagen, verwenden Sie die angular-datables eckigen Bibliothek sonst meist was passieren wird.

Änderungen in Ihrem Controller oder Ihrer Direktive werden nicht in der Ausgabe HTML wiedergegeben.
Einige Fehler können wiederholt auftreten.

Um die Menge der Probleme zu reduzieren, denen Sie gegenüberstehen. Hier ist ein Ausschnitt mit Winkeldatentabellen.

Entnommen Angular Datatables Documentation

angular.module('datatablesSampleApp', ['datatables', 'datatables.buttons']). 
 
    controller('sampleCtrl', function($scope, DTOptionsBuilder) { 
 
     $scope.dtOptions = DTOptionsBuilder.newOptions() 
 
      .withPaginationType('full_numbers') 
 
      .withDisplayLength(2) 
 
      .withOption('order', [1, 'desc']).withButtons([{ 
 
     text: '<button class="btn">Some button</button>', 
 
     key: '1', 
 
     action: function(e, dt, node, config) { 
 
      alert('Button activated'); 
 
     } 
 
     }]); 
 
    });

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.min.js"></script> 
 
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.2/angular-datatables.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.2/plugins/buttons/angular-datatables.buttons.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="datatablesSampleApp"> 
 
    <div ng-controller="sampleCtrl"> 
 
     <table datatable dt-options="dtOptions"> 
 
      <thead> 
 
       <tr> 
 
        <th>ID</th> 
 
        <th>First name</th> 
 
        <th>Last name</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td>1</td> 
 
        <td>Foo</td> 
 
        <td>Bar</td> 
 
       </tr> 
 
       <tr> 
 
        <td>123</td> 
 
        <td>Someone</td> 
 
        <td>Youknow</td> 
 
       </tr> 
 
       <tr> 
 
        <td>987</td> 
 
        <td>Iamout</td> 
 
        <td>Ofinspiration</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-10-06 06:51:08

@christianleroy Hat diese Antwort Ihnen helfen? –

Versuchen $ Ihre HTML zu kompilieren, bevor es auf die Daten zu beeinflussen, injizieren $

app.controller('mycontroller', ['$compile', ..., function($compile, ...)

in Ihrem Controller zusammenstellen und dann kompilieren Sie Ihre HTML

data = $compile('<button class="btn btn-primary btn-sm" ng-click="test()">TEST</button>')($scope);

Quelle

2017-10-06 11:07:42 khalil

Verwenden von ng-click in einer gerenderten Spalte von Datatable

Antwort

Verwandte Themen