Ng-Repeat в сообщении bootbox

Я использую bootbox для отображения нескольких данных с моего контроллера. Я собираюсь отобразить данные с помощью ng-repeat в таблице, используя сообщение bootbox. Это возможно? Я провожу некоторые исследования, но он не работает как $compile. Это мой код

adminFactory.getOTDetails(id).then(function(results){
$scope.ot_details = results.data;

  bootbox.dialog({
    message: '<fieldset><div align="center"><h5><strong>Over Time Request for Approval</strong></h5></div>' +
        '<table class="table"><tr><td rowspan="3">Name</td><td colspan="2">From</td><td colspan="2">To</td><td rowspan="2">Purpose</td><td rowspan="2">Action</td></tr>' +
        '<tr></tr><td>Date</td><td>Time</td><td>Date</td><td>Time</td></tr></table>' +
        '<tr ng-repeat="app in ot_details"><td>{{ app.name }}</td><td>{{ app.fdate}}</td><td>{{ app.ftime}}</td><td>{{ app.tdate}}</td><td>{{ app.ttime}}</td><td>{{ app.purpose}}</td></tr>' +
        '</fieldset>',
    title: "HRIS+",
    buttons: {
        aprv: {
        label: "Approve",
        className: "btn btn-primary",
        callback: function() {
            return true;
        }
      },
      disaprv: {
        label: "Disapprove",
        className: "btn btn-primary",
        callback: function() {
            return true;
        }
      }
    }
    });

1 ответ

Вы не можете использовать угловые директивы вне угловой среды, здесь вы пытаетесь использовать ngRepeat в сообщениях BootBox, которые не распознают угловые директивы. Вам необходимо скомпилировать строку html в элемент html с привязкой области видимости, а затем передать этот элемент в BootBox:

var templateString = '<fieldset><div align="center"><h5><strong>Over Time Request for Approval</strong></h5></div>' +
    '<table class="table"><tr><td rowspan="3">Name</td><td colspan="2">From</td><td colspan="2">To</td><td rowspan="2">Purpose</td><td rowspan="2">Action</td></tr>' +
    '<tr></tr><td>Date</td><td>Time</td><td>Date</td><td>Time</td></tr></table>' +
    '<tr ng-repeat="app in ot_details"><td>{{ app.name }}</td><td>{{ app.fdate}}</td><td>{{ app.ftime}}</td><td>{{ app.tdate}}</td><td>{{ app.ttime}}</td><td>{{ app.purpose}}</td></tr>' +
    '</fieldset>';

var element = $compile(templateString)($scope);

bootbox({
    message: element,

    ...

})
Другие вопросы по тегам