将小部件动态显示为模态

Question

我有一个包含大量小部件的 Angular.js 站点。 在这种情况下，小部件是一个 template.html 和一个设置为角度模块的 controller.js。

这些小部件正在仪表板上使用，用户可以在其中移动它们，小部件可能还需要出现在模式弹出窗口中，并且其他工具可以通过将小部件拉入他们的工具来与我们集成。

目前有 26 种模态并且还在增加。

如何动态创建模态框，这样我就不必将模态框包含到每个页面中？

有没有办法让它们全球化？我还需要将一个小部件（模板和控制器）“加载”到模块中，因为所有模块都具有相同的结构，但可能需要自定义页眉、正文和页脚。

通常我会将小部件转换为指令，但我正在与一个已经在仪表板上使用小部件的团队工作。

附：我们正在使用 $stateProvider 和 Angular-UI 引导模式。

Answer 1

您可能希望在全球范围内设置一个服务来为您执行此操作，您可以将所需的任何内容传递给模态以使其工作，就像这样 -

.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 而不是模板，并传入你自己的控制器。我在这里使用 requirejs 语法传递控制器。像这样的东西应该可以为您解决问题，然后您只需致电yourService.whateverModal 并传递您需要的任何参数。您也可以在该服务调用中在 bootstrap-ui 模式上传递您需要的任何额外设置，这取决于您需要自定义多少。

只有 1 条附加评论 - 我已将它们包装在 $q 中，因此您可以在调用此模式服务时选择使用承诺。例如 - 当模型关闭或取消时，我使用它来触发不同的事件。