如何在BootstrapDialog.show({})弹窗中传递参数？已遇数据无法获取问题

嘿，我看你在给BootstrapDialog传参数的时候踩了个小坑——你现在的data属性赋值方式不对，导致HTML里拿不到想要的$scope.ResourcePlanDetail.ResourcePlan.Name值。咱们一步步来修正：

问题出在哪？ #

你当前的代码里，data: $('#divResourcePlanName').text($scope.ResourcePlanDetail.ResourcePlan.Name)这行是在执行DOM文本设置操作，它返回的是$('#divResourcePlanName')这个jQuery对象，而不是你要传递的名称字符串。BootstrapDialog的data属性是用来存储弹窗实例的关联数据的，不是这么用的哦。

正确的实现方式 #

1. 先正确传递数据到弹窗实例

把要传递的参数直接以键值对形式放到data里，而不是执行DOM操作：

BootstrapDialog.show({
    closable: false,
    title: "This is my popup",
    message: $('<div></div>').load(url),
    // 直接把需要的数据存入data，这才是正确的姿势
    data: {
        resourcePlanName: $scope.ResourcePlanDetail.ResourcePlan.Name
    },
    // 可选：弹窗显示时，把数据渲染到DOM里
    onShow: function(dialog) {
        // 从弹窗实例中取出数据，设置到目标元素
        dialog.getModalBody().find('#divResourcePlanName').text(dialog.getData().resourcePlanName);
    }
});

2. 异步加载HTML后处理数据（关键！）

因为load(url)是异步操作，如果你直接在onShow里操作可能会遇到DOM还没加载完成的问题，更稳妥的方式是用load的回调函数：

BootstrapDialog.show({
    closable: false,
    title: "This is my popup",
    data: {
        resourcePlanName: $scope.ResourcePlanDetail.ResourcePlan.Name
    },
    message: $('<div></div>').load(url, function() {
        // HTML加载完成后，从当前弹窗实例取数据渲染
        var currentDialog = BootstrapDialog.getCurrentDialog();
        $(this).find('#divResourcePlanName').text(currentDialog.getData().resourcePlanName);
    })
});

3. 结合AngularJS的更优雅方式

既然你在用AngularJS，其实可以把弹窗内容做成一个Angular模板，通过控制器绑定数据，避免手动操作DOM：

• 比如把弹窗的HTML内容做成一个指令，或者在弹窗初始化时把数据存入一个共享服务，然后在弹窗的控制器里注入这个服务获取数据，这样完全符合Angular的数据绑定思路，不用手动去setText。

总结 #

BootstrapDialog的data是用来存储弹窗实例的私有数据的，不是直接和DOM绑定的。你需要先把数据存入data，等弹窗内容加载完成后，再从弹窗实例中取出数据渲染到对应的DOM元素上，或者结合Angular的机制来实现数据绑定。

内容的提问来源于stack exchange，提问作者Ritesh Gore