Smartadmin, подэлементы Datatables не привязаны (AngularJS)

Question

Я купил smartadmin из (wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0) и использовал версию 1.5 с угловым.

Я извлек datatable (wrapbootstrap.com/preview/WB0573SK0) и поместил его в свой собственный проект. Пока это работает, только когда я нажимаю на строку и открывается подэлемент, данные там не привязаны.

Когда я проверяю область действия с помощью модуля Angular Chrome Plugin, я могу видеть на вашей версии, а также в моем проекте, что область имеет фактические данные, но каким-то образом ng-bing не работает. (Как вы можете видеть на скриншоте)

Мой проект - пустой подэлемент http://s14.directupload.net/images/141120/f9xzm3ab.png

Что его должно быть как http://fs1.directupload.net/images/141120/2pp3icxa.png

The View:

<caption class="smart-datatable-child-format" data-child-control="td.details-control"> 
        <table cellpadding="5" cellspacing="0" border="0" 
         class="table table-hover table-condensed"> 
        <tr> 
         <td style="width:100px">Project Title:</td> 
         <td ng-bind-html="d.name"></td> 
        </tr> 
        <tr> 
         <td>Deadline:</td> 
         <td ng-bind-html="d.ends"></td> 
        </tr> 
        <tr> 
         <td>Extra info:</td> 
         <td>And any further details here (images etc)...</td> 
        </tr> 
        <tr> 
         <td>Comments:</td> 
         <td ng-bind-html="d.comments"></td> 
        </tr> 
        <tr> 
         <td>Action:</td> 
         <td ng-bind-html="d.action"></td> 
        </tr> 
        </table> 
       </caption> 

Контроллер:

$scope.projects = [ 
{ 
    "name": "name", 
    "est": "est", 
    "contacts": "contacts", 
    "status": "status", 
    "target-actual": "target-actual", 
    "actual": "actual", 
    "tracker": "tracker", 
    "starts": "01-21-2013", 
    "ends": "<strong>03-15-2015</strong>", 
    "comments": "comments", 
    "action": "actions" 
}]; 


$scope.tableOptions = { 
"data": $scope.projects, 
"iDisplayLength": 15, 
"columns": [ 
    { 
    "class": 'details-control', 
    "orderable": false, 
    "data": null, 
    "defaultContent": '' 
    }, 
    {"data": "name"}, 
    {"data": "est"}, 
    {"data": "contacts"}, 
    {"data": "status"}, 
    {"data": "target-actual"}, 
    {"data": "starts"}, 
    {"data": "ends"}, 
    {"data": "tracker"} 
], 
"order": [[1, 'asc']]}; 

директива: (на обработчик щелчка)

if (attributes.tableOptions) { 
    console.log("extending angular tableOptions"); 
    options = angular.extend(options, scope.tableOptions) 
    } 

    var _dataTable; 

    var childFormat = element.find('.smart-datatable-child-format'); 
    if (childFormat.length) { 
    var childFormatTemplate = childFormat.remove().html(); 
    element.on('click', childFormat.data('childControl'), function() { 
     var tr = $(this).closest('tr'); 

     var row = _dataTable.row(tr); 
     if (row.child.isShown()) { 
     // This row is already open - close it 
     row.child.hide(); 
     tr.removeClass('shown'); 
     } 
     else { 
     // Open this row 
     var childScope = scope.$new(); 
     childScope.d = row.data(); 
     var html = $compile(childFormatTemplate)(childScope); 
     row.child(html).show(); 
     tr.addClass('shown'); 
     } 
    }) 
    } 

    _dataTable = element.DataTable(options); 

Любая помощь очень apreciated!

Answer 1

Мне пришлось применить область действия в директиве. $ compile было недостаточно.

childScope.$apply(function() { 
      childScope.d = row.data(); 
     });