动态地将小部件显示到模态中

Display a widget into a modal dynamically

本文关键字：模态 显示 小部 动态      更新时间：2023-09-26

我有一个有大量小部件的Angular.js站点。在本例中，小部件是一个template.html和一个controller.js，它们被设置为angular模块。

这些小部件在仪表板上使用，用户可以移动它们，小部件也可能需要出现在模态弹出框中，其他工具可能通过将小部件拉入他们的工具与我们集成。

目前有26个情态动词，而且还在增加。

我怎样才能动态地创建一个模态，这样我就不必在每个页面中包含模态了?

是否有办法使它们全局?此外，我需要"加载"一个小部件(模板和控制器)到模块中，因为所有模块将具有相同的结构，但可能需要自定义的页眉，正文和页脚。

通常情况下，我会把小部件变成指令，但我所在的团队已经让小部件在仪表板上工作了。

注:我们正在使用$stateProvider和Angular-UI Bootstrap模式。

你会想要设置一个全局服务来为你做这件事，在那里你可以传递任何你需要的东西给模态，让它工作所以像这样- 

.service(metadata.componentName, [
        '$modal',
        '$q',
        function($modal, $q) {
            return {
                confirm: function confirmModal(options) {
                    return $q(function(resolve, reject) {
                        $modal.open({
                            size: 'sm',
                            template: '<div class="modal-body">' + options.message + '</div><div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>',
                            controller: modalCtrlRJS.componentName
                        }).result.then(resolve, reject);
                    });
                },
                info: function infomModal(options) {
                    return $q(function(resolve, reject) {
                        $modal.open({
                            size: 'sm',
                            template: '<div class="modal-body"> <button type="button" class="close" ng-click="ok()"><span>×</span></button>' + options.message + '</div>',
                            controller: timeoutModalCtrlRJS.componentName
                        }).result.then(resolve, reject);
                    });
                },
                error: function errormModal(options) {
                    return $q(function(resolve, reject) {
                        $modal.open({
                            size: 'sm',
                            template: '<div class="modal-body"> <button type="button" class="close" ng-click="ok()"><span>×</span></button>' + options.message + '</div>',
                            controller: timeoutModalCtrlRJS.componentName
                        }).result.then(resolve, reject);
                    });
                }
            };
        }

所以这些都是简单的模态，这里的技巧是你可能会使用templateUrl而不是模板，并传入你自己的控制器。我在这里使用requires语法传递控制器。类似这样的东西应该可以满足你的需要，然后你只需调用yourService.whateverModal并传递你需要的参数。你也可以在那个服务调用的bootstrap-ui模态上传递任何你需要的额外设置，这取决于你需要自定义它的程度。

只是一个额外的注释-我在$q中包装了这些，所以当你调用这个模态服务时，你可以选择使用承诺。例如，当模型关闭或取消时，我使用它来触发不同的事件。

相关文章：