如何在Angular中添加可重用的模式对话框? | 如何在Angular中添加可重用的模式对话框

本文介绍了如何在Angular中添加可重用的模式对话框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是Angular的新手，正尝试实现此解决方案进入我的项目.

看起来很容易，但是，我试图将其变成可重用的元素，以便可以在任何地方调用它，并只传递要显示的内容(否则，这有什么用?). /p>

所以，我的具体问题是:假设我已经有一个绑定到某些DOM元素的controller，并且它具有可以获取某些factory驱动的$http调用的功能，并且希望在响应时通知我通过这个对话框，用户如何将* this指令和* this控制器与现有的控制器结合起来，以及如何以允许我从完全不同的controller中再次使用它的方式来实现它? >

或者这可能不是一个很好的例子，我应该看看另一个例子吗?

解决方案

与其他选项相比，以下给出的是极简主义方法，使用的是角度 factory .请参见下面的示例代码片段.

注意:将Angular JS与UI Bootstrap-AngularUI一起使用.

可重复使用的模式视图- ConfirmationBox.html

 <div class="modal-header">
  <h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
  {{message}}
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary btn-warn" data-ng-click="ok(); $event.stopPropagation()">OK</button>

  <button type="button" class="btn btn-default" data-ng-click="cancel(); $event.stopPropagation()">Cancel</button>
</div>

可重用模块和共享工厂，用于处理可重用模式对话框

 angular.module('sharedmodule',['ui.bootstrap', 'ui.bootstrap.tpls'])
.factory("sharedService",["$q", "$modal", function ($q, $modal)
{
    var _showConfirmDialog = function (title, message)
    {
        var defer = $q.defer();

        var modalInstance = $modal.open({
            animation: true,
            size: "sm",
            templateUrl: 'ConfirmationBox.html',
            controller: function ($scope, $modalInstance)
            {
                $scope.title = title;
                $scope.message = message;

                $scope.ok = function ()
                {
                    modalInstance.close();
                    defer.resolve();
                };

                $scope.cancel = function ()
                {
                    $modalInstance.dismiss();
                    defer.reject();
                };
            }
        });

        return defer.promise;
    }

    return {

        showConfirmDialog: _showConfirmDialog
    };

}]);

使用共享模式对话框的视图部分

 <a data-ng-click="showConfirm()">Go Back to previous page</a>

视图控制器，打开共享的可重用模式对话框并处理通知(确定"和取消")

 var myModule = angular.module("mymodule", ['sharedmodule', 'ui.bootstrap', 'ui.bootstrap.tpls']);

myModule.controller('myController', ["$scope", "sharedService", "$window",
function ($scope, sharedService, $window)
{
    $scope.showConfirm = function ()
    {
        sharedService.showConfirmDialog(
            'Confirm!',
            'Any unsaved edit will be discarded. Are you sure to navigate back?')
            .then(function ()
            {
                $window.location = '#/';
            },
            function ()
            {
            });
    };
}]);

I'm new to Angular and attempting to implement this solution into my project.

It looks painfully easy, however, I'm trying to make this into a re-usable element so that I can call it from anywhere and just pass in the content to be shown (otherwise, what's the point?).

So, my specific question is: assuming I already have a controller that's bound to some DOM element and it has a feature that goes and fetches some factory driven $http call and upon the response I wish to notify the user via this dialog of something, how do I combine *this directive and *this controller with my existing one and how do I do it in a way that allows me to then use it again from a totally different controller?

Or is this perhaps a bad example for this use and should I be looking at a different one?

解决方案

Compared to other options, below given the minimalist approach, using angular factory. See a sample snippet below.

Note: using Angular JS with UI Bootstrap - AngularUI.

Reusable modal view - ConfirmationBox.html

<div class="modal-header">
  <h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
  {{message}}
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary btn-warn" data-ng-click="ok(); $event.stopPropagation()">OK</button>

  <button type="button" class="btn btn-default" data-ng-click="cancel(); $event.stopPropagation()">Cancel</button>
</div>

Reusable module and shared factory, for handling the reusable modal dialog

angular.module('sharedmodule',['ui.bootstrap', 'ui.bootstrap.tpls'])
.factory("sharedService",["$q", "$modal", function ($q, $modal)
{
    var _showConfirmDialog = function (title, message)
    {
        var defer = $q.defer();

        var modalInstance = $modal.open({
            animation: true,
            size: "sm",
            templateUrl: 'ConfirmationBox.html',
            controller: function ($scope, $modalInstance)
            {
                $scope.title = title;
                $scope.message = message;

                $scope.ok = function ()
                {
                    modalInstance.close();
                    defer.resolve();
                };

                $scope.cancel = function ()
                {
                    $modalInstance.dismiss();
                    defer.reject();
                };
            }
        });

        return defer.promise;
    }

    return {

        showConfirmDialog: _showConfirmDialog
    };

}]);

Portion of your View, using the shared modal dialog

<a data-ng-click="showConfirm()">Go Back to previous page</a>

Controller of your view, opening your shared reusable modal dialog and handling notifications (Ok and Cancel)

var myModule = angular.module("mymodule", ['sharedmodule', 'ui.bootstrap', 'ui.bootstrap.tpls']);

myModule.controller('myController', ["$scope", "sharedService", "$window",
function ($scope, sharedService, $window)
{
    $scope.showConfirm = function ()
    {
        sharedService.showConfirmDialog(
            'Confirm!',
            'Any unsaved edit will be discarded. Are you sure to navigate back?')
            .then(function ()
            {
                $window.location = '#/';
            },
            function ()
            {
            });
    };
}]);

这篇关于如何在Angular中添加可重用的模式对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！