可重用的模态窗口设计模式angularJS

Question

我一直在尝试创建一个可与 angularJS 一起使用的模态窗口。 当我在谷歌上搜索时，我知道可重复使用的模态是通过使用

1. 自定义指令。
2. 服务。

我不知道该采用哪种方法。 在 angularJS 中创建模态窗口最定制的方法是什么？以及有关如何在 angularJS 中创建可重复使用的模态窗口（模态窗口的设计模式）的任何资源

注意：请建议没有 angular-bootstrap-ui 或 bootstrap 的解决方案。

更新： 我正在尝试开发一种类似的屏幕。

1. 当用户单击“选择总线”链接时，将显示一个模式窗口。
2. 模态窗口的标题、内容以对应的超链接为准。
3. 我已经在
的帮助下使用自定义指令完成了这个屏幕

How to Create a Simple Modal Dialog Directive in Angular.js

4. 但是我将把它重写为可重用的模块或指令。
5. 因此建议一些设计模式来使用 angularJS 创建可重用的自定义模态对话框窗口

Answer 1

请查看以下链接以查看可重复使用的角度窗口。 这可能会解决您的问题。

http://www.dwmkerr.com/the-only-angularjs-modal-service-youll-ever-need/

Answer 2

一个相当简单的方法是 ng-modal (https://github.com/adamalbrecht/ngModal)，它是一个指令，意味着它是高度可重用的。服务也是可行的，但它们旨在获取/设置/处理数据，而不是显示 HTML；因此指令是要走的路。

我已经使用了 ng-modal，并且只添加了一点代码就可以让它超级可重用。您可以将它放在它自己的控制器中并始终注入它，以便您可以打开模式并显示一条消息或一些 html。

HTML：

<div ng-controller="modalCtrl">
    <modal-dialog show='dialogShown' dialog-title='titleToUse' height='400px' width='75%'>
        <p ng-bind="messageToShow"> </p>
        <div ng-bind-html="someHTML"></div>
    </modal-dialog>
</div>

JS：

myApp.controller('modalCtrl', function($scope){

    $scope.titleToUse = "Modal Title";
    $scope.messageToShow = "Testing Message"; // default message
    $scope.someHTML = "<div>Whoa! A Div!</div>";

    $scope.$on('changeMessageEvent', function($event, message){ // listens for change message event and sets new message
        $scope.messageToShow = message;
    });
});

   myApp.controller('someOtherController', function($scope, $rootScope){ // import rootScope

       var messageToSendToModal = "New Message!";
       $rootScope.$broadcast('changeMessageEvent', messageToSendToModal );

   });

更新：
如果你想要动态模板和控制器，这很容易使用 ng-modal，你只需要使用 ng-include：

<div ng-controller="modalCtrl">
    <modal-dialog show='dialogShown' dialog-title='titleToUse' height='400px' width='75%'>
        <p ng-bind="messageToShow"> </p>
        <div ng-bind-html="someHTML"></div>
        <!-- some dynamic template -->
        <ng-include src="pathToTemplate"></ng-include>
    </modal-dialog>
</div>

在 modalCtrl 中你有

$scope.pathToTemplate = "/path/to/template.html";

该模板可以包含一个控制器，并且可以通过变量动态切换。

Answer 3

如果有人在寻找另一个示例，我只是在创建自定义模态服务和指令方面有所突破，通过他们，您可以将模态添加到如下视图：

<button ng-click="vm.openModal('custom-modal-1')">Open Modal 1</button>

<modal id="custom-modal-1">
    <div class="modal">
        <div class="modal-body">
            <h1>A Custom Modal!</h1>
            <p>
                Home page text: <input type="text" ng-model="vm.bodyText" />
            </p>
            <button ng-click="vm.closeModal('custom-modal-1');">Close</button>
        </div>
    </div>
    <div class="modal-background"></div>
</modal>

这是打开和关闭模式的控制器：

(function () {
    'use strict';

    angular
        .module('app')
        .controller('Home.IndexController', Controller);

    function Controller(ModalService) {
        var vm = this;

        vm.openModal = openModal;
        vm.closeModal = closeModal;

        initController();

        function initController() {
            vm.bodyText = 'This text can be updated in modal 1';
        }

        function openModal(id){
            ModalService.Open(id);
        }

        function closeModal(id){
            ModalService.Close(id);
        }
    }

})();

这是自定义模态服务：

(function () {
    'use strict';

    angular
        .module('app')
        .factory('ModalService', Service);

    function Service() {
        var modals = []; // array of modals on the page
        var service = {};

        service.Add = Add;
        service.Remove = Remove;
        service.Open = Open;
        service.Close = Close;

        return service;

        function Add(modal) {
            // add modal to array of active modals
            modals.push(modal);
        }

        function Remove(id) {
            // remove modal from array of active modals
            var modalToRemove = _.findWhere(modals, { id: id });
            modals = _.without(modals, modalToRemove);
        }

        function Open(id) {
            // open modal specified by id
            var modal = _.findWhere(modals, { id: id });
            modal.open();
        }

        function Close(id) {
            // close modal specified by id
            var modal = _.findWhere(modals, { id: id });
            modal.close();
        }
    }
})();

这是自定义模态指令：

(function () {
    'use strict';

    angular
        .module('app')
        .directive('modal', Directive);

    function Directive(ModalService) {
        return {
            link: function (scope, element, attrs) {
                // ensure id attribute exists
                if (!attrs.id) {
                    console.error('modal must have an id');
                    return;
                }

                // move element to bottom of page (just before </body>) so it can be displayed above everything else
                element.appendTo('body');

                // close modal on background click
                element.on('click', function (e) {
                    var target = $(e.target);
                    if (!target.closest('.modal-body').length) {
                        scope.$evalAsync(Close);
                    }
                });

                // add self (this modal instance) to the modal service so it's accessible from controllers
                var modal = {
                    id: attrs.id,
                    open: Open,
                    close: Close
                };
                ModalService.Add(modal);

                // remove self from modal service when directive is destroyed
                scope.$on('$destroy', function() {
                    ModalService.Remove(attrs.id);
                    element.remove();
                });               

                // open modal
                function Open() {
                    element.show();
                    $('body').addClass('modal-open');
                }

                // close modal
                function Close() {
                    element.hide();
                    $('body').removeClass('modal-open');
                }
            }
        };
    }
})();

欲了解更多信息，您可以查看this blog post