习语AngularJS模态

Idiomatic AngularJS modal

本文关键字：模态 AngularJS 习语      更新时间：2023-09-26

我正在掌握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});
        };
    });

在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";
        };
    });

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

相关文章：