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

Question

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

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

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

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

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

通常我会把小部件变成指令，但我在一个已经在仪表板上运行小部件的团队中工作。

P.S。我们正在使用 $stateProvider 和 Angular-UI Bootstrap 模态。

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 中，因此您可以选择在调用此模式服务时使用承诺。例如 - 当模型关闭或取消时，我用它来触发不同的事件。

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

Display a widget into a modal dynamically

javascript

twitter-bootstrap

angularjs

angular-ui