引导箱消息内的 Ng-Repeat答案

【问题标题】：Ng-Repeat inside the bootbox message引导箱消息内的 Ng-Repeat
【发布时间】：2015-10-18 23:27:04
【问题描述】：

我正在使用 bootbox 来显示来自我的控制器的多个数据。我将使用引导箱消息在表中使用 ng-repeat 显示数据。那可能吗？我做了一些研究，但它不像 $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;
        }
      }
    }
    });

【问题讨论】：

在 HTML 中，ng-repeat 工作正常，但在引导箱消息中它不起作用。我该如何解决？任何答案将不胜感激。谢谢专业人士！

标签： angularjs html-table angularjs-ng-repeat bootbox

【解决方案1】：

您不能在 Angular 环境之外使用 Angular 指令，这里您尝试在无法识别 Angular 指令的 BootBox 消息选项中使用 ngRepeat。您需要将 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,

    ...

})

【讨论】：