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的模式中，找到一种方法使单独的控制器进行通信是不好的做法。您可以创建一个可以在ModalCtrl和任何其他控制器中注入的中间服务。

例如，让我们介绍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";
        };
    });

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

惯用的AngularJS模态

1 个答案: