Bootstrap 显示带有angular js数据绑定表单的bootbox

busg9geu  于 12个月前  发布在  Bootstrap
关注(0)|答案(4)|浏览(103)

我刚开始使用Angular JS两周,对它的数据绑定功能感到非常惊讶。
我也非常喜欢使用bootboxjs来显示消息和所有的信息给用户。
我只是在想,我们是否可以通过自定义对话框在bootbox中显示Angular JS的数据绑定形式。
我试过,但我没有得到的内容,事实上,对话框显示的模板,因为它是,而不是与数据。
我们如何在bootbox UI中显示已经绑定的数据。

lhcgjxsq

lhcgjxsq1#

必须使用$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 () {
                        }
                    }
                }
            });

字符串

o4tp2gmn

o4tp2gmn2#

我建议你这个很好的例子**Plunker**如何传递数据到对话框。
但是它不是bootbox(使用jQuery)。演示显示的对话框仅基于bootstrap和angualrJS。
希望它能帮助

vjhs03f7

vjhs03f73#

现在有一个非常好的模块,可以用单独的模板文件来处理这个问题!https://github.com/eriktufvesson/ngbootbox
很好。

cgfeq70w

cgfeq70w4#

我知道这是一个老问题,但除了最高评级的答案,我目前无法评论,人们需要考虑对话框的生命周期。

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中的值。
希望这能帮助其他人维护遗留代码。

相关问题