javascript - 在 Angular JS 中显示/隐藏通用模式的最佳方式

Question

根据 Angular 演示 (http://plnkr.co/edit/?p=preview)，我有一个 angular-ui-bootstrap 模态模板、 Controller 和实例 Controller

我希望我的应用程序中的任何其他 Controller 能够显示/隐藏这个通用模态视图。

目前，我是通过$rootScope.$emit 和$on 完成的。

对于这种共享组件行为是否有更好的模式？

下面是我目前的实现....

我的主 html 文件中包含模板

<div ng-include src="'/views/partials/modal.html'" ng-controller="ModalController as vm"></div>

所以 ModalController 有 ...

app.controller('ModalController', ['$rootScope', '$modal', function($rootScope, $modal) {

    $rootScope.$on("modal:open", function(event, params, okCallback, cancelCallback) {

        okCallback = okCallback || _.noop;
        cancelCallback = cancelCallback || _.noop;

        var modalInstance = $modal.open({
            animation: true,
            templateUrl: 'modal.html',
            controller: 'ModalInstanceController',
            controllerAs: "vm",
            //size: 'sm',
            resolve: {
                params: function() {
                  return params
                }
            }
        });

        modalInstance.result.then(function (result) {
              okCallback(result);
            }, function () {
              cancelCallback();
        });

    });

}]);

我从任何其他 Controller 调用它......

$rootScope.$emit("modal:open", {
        title:"Are you sure?",
        body:"Are you sure you want to do this?",
        confirm:true,
        okClass:"btn-warning"
    }, success function() {
    }, error function() {
});

Answer 1

Is there a better pattern for this kind of shared component behaviour?

是的。使用服务。然后，您可以将该服务注入(inject)到您想要使用它的每个 Controller 中，并调用一个方法来打开它；类似于:

modalService.openModal({
    title:"Are you sure?",
    body:"Are you sure you want to do this?",
    confirm:true,
    okClass:"btn-warning"
}, function success(){}, function error(){});

openModal 方法与 $rootScope.$on('modal:open') 函数具有相同的代码。

( https://docs.angularjs.org/guide/services )