Question

我一直在尝试创建一个可以与angularJS一起使用的模态窗口。当我在Google上搜索时，我发现使用

创建了可重用的模态

自定义指令。
服务。

我很困惑要采用哪种方法。在angularJS中创建模态窗口的最自定义方法是什么？以及如何在angularJS

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

更新的我正在尝试开发类似的屏幕。 enter image description here

当用户点击“选择总线”链接时，将显示一个模态窗口。
标题，模态窗口的内容基于相应的超链接。
我已经在

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

但我要将其重写为可重复使用的模块或指令。
因此建议使用angularJS创建一些设计模式创建可用的自定义模式对话框窗口

Answer 1

一个相当简单的是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 2

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

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

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

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

3 个答案: