Question

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

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

目前有26个模态和计数。

如何动态创建模态以便我不必将模态包含到每个页面中？

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

通常情况下，我会将小部件变成指令，但我正在为已经在仪表板上工作的小部件工作。

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模式所需的任何额外设置，这取决于您需要多少自定义它。

只需另外一条评论 - 我已将这些评论包装在$q中，因此您可以选择在调用此模态服务时使用该承诺。例如 - 当模型关闭或取消时，我用它来触发不同的事件。

将小部件动态显示为模态

1 个答案: