在何处创建与控制器无关的角度模态对话框(角度材质)

Question

创建与当前视图控制器/状态无关的应用程序或系统范围对话框的最佳位置在哪里？

例如：我在聊天视图中，系统显示一个（例如mdDialog）通知，表示有人在一个完全不同的组件中更改了某些内容。

是否可以使用工厂/服务进行此操作，然后打开对话框？

我在问，因为这似乎是某种UI操作，通常在控制器中完成。

有什么最佳实践吗？

Answer 1

对于可由多个控制器重用的对话框，我认为工厂绝对是正确的方法。例如，假设您有一个用于创建或编辑单个小部件的对话框。它将从已经有小部件集合的页面中调用。我现在的代码中有这样的东西：

angular.module('myModule', ['ngMaterial'])
        .factory('MyDialogsService', MyDialogsService)
        .controller('WidgetDialogController', WidgetDialogController);
function WidgetDialogController($mdDialog, Widget, WidgetService) {
    var vm = angular.extend(this, {
        Widget: new WidgetService.Widgets(Widget),      // ng-resource
        save  : save,
        cancel: cancel
    });
    function cancel() {
        $mdDialog.cancel();
    }
    function save() {
        vm.Widget.$save(null, function (output) {
            $mdDialog.hide(output);
        });
    }
}
function MyDialogsService($mdDialog) {
    return {
        openWidgets: openWidgetsDialog
    };
    function openWidgetsDialog(event, widget) {
        return $mdDialog.show({
            controller      : 'WidgetsDialogController as vm',
            templateUrl     : 'templates/widgets-dialog.html',
            bindToController: true,
            locals          : {Widget: widget},
            targetEvent     : event
        });
    }
}

这会返回一个承诺，这样您就可以对对话框中发生的任何事情做出反应。在你的控制器中，你可以这样使用它：

function openWidgetDialog(event, item) {
    return MyDialogsService.openWidget(event, item).then(function (output) {
        vm.Widget = output;
        alert("Hey look a new widget!");
    });
}

你的页面模板用CCD_ 1之类的东西来调用它。$event被传来传去，这样MD就可以通过一个漂亮的动画从按钮打开对话框。不管怎样，这基本上就是我使用的，而且效果很好。