レンダリングされていない角度データテーブルにテンプレートを含める

Question

angular-datatablesプラグインを使用してプロジェクトにデータ型を追加しています。ここでは、私はいくつかのボタンを追加する列Actionsを持っています。このため、同じページに定義されているng-templateを使用しています。 問題は、テンプレートが常にレンダリングされるとは限りません。ボタンを表示することがあり、時には表示されないこともあります。私は検索を行った後、決してボタンを表示しません。

コントローラ

$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) 
]; 

図

<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> 

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); 
} 

私はこれがいくつかの同期問題であると信じています。しかし、私はどこにも行きません。

Answer 1

正常に挿入されたテンプレートは本当に得られますか？私が$compile(angular.element(row).contents())($scope)を働かせる唯一の方法は、<table>が事前作成されているか、ng-repeatでレンダリングされている場合です。 - >http://plnkr.co/edit/UqZKhpgMx7aHCXdaNkiN?p=preview

---

私にとって

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

作品：遅れてここ

は、jQueryのAJAXからHTMLを注入されたが、私は$scope.$apply()の周りの唯一の方法だと思いますng-template含むバインディングを交換する必要があります

愚かな私。同じことは簡単な$timeoutで行うことができます。

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