显示带有 Angular js 数据绑定表单的引导箱

Question

我在两周前开始使用 Angular JS，并对它的数据绑定功能感到非常惊讶。

我也非常喜欢使用 bootboxjs 向用户显示消息和所有信息。

我只是在想我们是否可以通过自定义对话框在 bootbox 中显示 Angular JS 的数据绑定形式。

我尝试过，但我没有得到内容，事实上对话框显示的是模板，而不是数据。

如何在 Bootbox UI 中显示已绑定数据的数据。

Answer 1

您必须使用$compile。

http://code.angularjs.org/1.2.13/docs/guide/compiler

例如：

            var tplCrop = '<div><img ng-src="{{file.src}}"/></div>';
            var template = angular.element(tplCrop);
            var linkFn = $compile(template);
            var html= linkFn($scope);

            bootbox.dialog({
                message: html,
                title: "My title",
                buttons: {
                    ok: {
                        label: "Ok",
                        className: "btn-success",
                        callback: function () {
                        }
                    },
                    close: {
                        label: "Close",
                        className: "btn-danger",
                        callback: function () {
                        }
                    }
                }
            });

Answer 2

我建议你这个很好的例子Plunker如何将数据传递到Dialog。

但是它不是 bootbox（使用 jQuery）。该演示显示仅基于 bootstrap 和 angualrJS 的对话框。

希望对你有帮助

Answer 3

现在有一个非常好的模块，可以使用单独的模板文件来处理它！ https://github.com/eriktufvesson/ngbootbox

非常好！

Answer 4

我很欣赏这是一个老问题，但除了我目前无法评论的最高评价答案之外，还需要考虑对话框的生命周期。

let tplCrop = '<div><img ng-src="{{file.src}}"/></div>';
let template = angular.element(tplCrop);
ley linkFn = $compile(template);
let $childScope = $scope.$new();
let html= linkFn($childScope);

bootbox.dialog({
    message: html,
    title: "My title",
    buttons: {
        ok: {
            label: "Ok",
            className: "btn-success",
            callback: function () {
            }
        },
        close: {
            label: "Close",
            className: "btn-danger",
            callback: function () {
            }
        },
        onHide: function(e){
            childScope.$destroy();
        }
    }
});

我发现了 AngularJS v1.8.2 和 select 指令的问题；当静态定义选项时，我们发现模型中的值在对话框关闭后不久就会设置为 null。通过使用上述

childScope

纠正了该行为。

如果选项是静态的，例如

<option value="abc">abc</option>

当对话框关闭时，选项将从 DOM 中删除。 AngularJS 代码收到删除通知，并最终将模型中的值设置为 null。

当使用 ng-options 属性生成选项时，这似乎不会发生，可能是因为 Angular 负责处理选项。

通过在对话框从 DOM 中删除之前销毁

childScope

，从 DOM 中删除选项不会影响

$scope

中的值。

希望这能帮助其他人维护遗留代码。