angularjs – 如何在Angular中添加可重用的模态对话框？

注意：使用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 ()
            {
            });
    };
}]);