javascript - 惯用的 AngularJS 模态

Question

我开始掌握 AngularJS - 在我的努力中，我了解到 $broadcast/$emit 被滥用了。过去曾与 Backbone 合作过，这项服务似乎是 pubSub 的自然替代品，它是 Angular 之外的解耦组件的标准 goto。

在这种情况下，我想渲染一个模态叠加层以响应网络事件和用户输入。假设我有这个:

angular
    .module("app.controllers")
    .controller("ModalCtrl", function ($scope, $rootScope) {
         // or a directive?
         $scope.modal = {
             title: "",
             visibility: ""
         };
    });

包装这个:

<div data-ng-controller="ModalCtrl" class="modal {{visibility}}">
    <h2 data-ng-bind="modal.title"></h2>
</div>

我应该如何改变这个组件与另一个组件的可见性 - 即:

angular
    .module("app.controllers")
    .controller("MyCtrl", function ($scope, $rootScope, ModalCtrl) {

        $scope.handleClick = function () {
            // this:
            $rootScope.$broadcast("modal", {
                title: "ClickHandler",
                visibility: "is-visible"
            });

            // or this? modify scope directly
            $rootScope.modal = {
                title: "ClickHandler",
                visibility: "is-visible"
            };

            // or this? - assuming I can pass it in as a dependency
            ModalCtrl.show({title: "ClickHandler});
        };

    });

Answer 1

在 MVW Angular 的模式中，找到一种方法让单独的 Controller 进行通信是一种不好的做法。您可以制作一个可以注入(inject) ModalCtrl 以及任何其他 Controller 的中间服务。

比如我们引入ModalService:

// Services
angular
    .module("app.services")
    .factory("ModalService", function () {
        var ModalService = {
            modal: {
                title: "",
                visibility: ""
            }
        };
        return ModalService;
    });

// Controllers, depending on services
angular
    .module("app.controllers", ["app.services"])
    .controller("ModalCtrl", function ($scope, ModalService) {
         $scope.modal = ModalService.modal;
    });
    .controller("MyCtrl", function ($scope, ModalService) {
        $scope.handleClick = function () {
            ModalService.modal.title = "ClickHandler";
            ModalService.modal.visibility = "is-visible";
        };
    });

这是一个简单的例子。请注意，服务公开函数比直接公开结构更好。它确实公开了一个结构，以便清楚地解释我的观点。