Include-Vorlage in angular-Datatables nicht rendern

Question

Ich verwende angular-datatables Plugin, um Databases zu meinem Projekt hinzuzufügen. In diesem habe ich eine Spalte Actions, wo ich einige Tasten hinzufügen möchte. Dazu verwende ich ng-template, das auf derselben Seite definiert ist. Das Problem besteht darin, dass die Vorlage nicht immer gerendert wird. Es zeigt manchmal den Knopf, und manchmal nicht. Es zeigt nie die Tasten, nachdem ich eine Suche gemacht habe.

Controller

$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', { 
     url: '/api/department', 
     type: 'GET' 
    }) 
    .withDataProp('data') 
    .withOption('processing', true) 
    .withOption('serverSide', true) 
    .withPaginationType('full_numbers') 
    .withOption('createdRow', function (row, data, dataIndex) { 
     // Recompiling so we can bind Angular directive to the DT 
     $compile(angular.element(row).contents())($scope); 
    }) 
    .withBootstrap(); 
$scope.dtColumns = [ 
    DTColumnBuilder.newColumn('id').withTitle('ID'), 
    DTColumnBuilder.newColumn('name').withTitle('Name'), 
    DTColumnBuilder.newColumn('actions').withTitle('Actions').withOption("searchable", false) 
]; 

Ansicht

<script type="text/ng-template" id="actions.html"> 
    <button class="btn btn-primary btn-xs" ng-click="edit()"><i class="fa fa-edit"></i> Edit</button> 
    <button class="btn btn-danger btn-xs" ng-click="delete()"><i class="fa fa-trash"></i> Delete</button> 
</script> 
<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="DepartmentsController"> 
    <div class="bg-light lter b-b wrapper-md"> 
     <h1 class="m-n font-thin h3">Departments</h1> 
    </div> 
    <div class="wrapper-md"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-xs-6"> 
         <button class="btn m-b-md btn-md btn-primary " ui-sref="manager.departments.create"> 
          <i class="fa fa-plus"></i> <span class="hidden-sm hidden-xs">Add Department</span></button> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-12 m-b-xs"> 
         <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped b-t b-b"> 
          <thead> 
           <tr> 
            <th style="width:20%">ID</th> 
            <th style="width:60%">Name</th> 
            <th style="width:20%">Actions</th> 
           </tr> 
          </thead> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Controller auf Server-Seite in Laravel

public function index() { 
    $departments = Department::company($this->company->id) 
      ->select("departments.id", "departments.name"); 

    return \Datatables::of($departments) 
      ->add_column("actions", function($row) { 
       return '<div ng-include src="\'actions.html\'"></div>'; 
      }) 
      ->make(true); 
} 

Ich glaube, das ist ein Synchronisationsproblem. Aber ich komme nirgendwohin.

Answer 1

Erhalten Sie wirklich erfolgreich eingefügte Vorlagen? Die einzige Möglichkeit, $compile(angular.element(row).contents())($scope) zum Arbeiten zu bekommen, ist, wenn der <table> vorgebaut oder von ng-repeat gerendert wird.

Hier verzögert injizierten HTML aus einer jQuery AJAX muss mit ng-template einschließlich Bindungen ersetzt werden, ich denke $scope.$apply() die einzige Möglichkeit ist, um:

.withOption('createdRow', function (row, data, dataIndex) { 
    $scope.$apply($compile(angular.element(row).contents())($scope)) 
}) 

Werke für mich ->http://plnkr.co/edit/UqZKhpgMx7aHCXdaNkiN?p=preview

---

Dumm mich. Das Gleiche kann in einem einfachen $timeout getan werden.

$timeout(function() { 
    $compile(angular.element(row).contents())($scope) 
}) 

http://plnkr.co/edit/5OTeHHUgkIurd6Z3DCkP?p=preview