Question

我是Angular的新手并试图在我的项目中实施this solution。

看起来非常容易，但是，我试图将其变成一个可重复使用的元素，以便我可以从任何地方调用它，只需传入要显示的内容（否则，是什么？重点？）。

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

或者这可能是这种用法的一个不好的例子，我应该看一个不同的吗？

Answer 1

与其他选项相比，下面给出了极简主义方法，使用了角度工厂。请参阅下面的示例代码段。

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

Answer 2

尝试使用'ngDialog'库进行弹出和模态。非常好的图书馆。稍后您可以创建一个内部调用ngDialog函数的服务。之后，可以将此服务注入您的控制器中以供使用。我在一个项目中实现了这一点。

服务中的函数可以接受用于初始化ngDialog模态的参数。

希望有所帮助：）

Answer 3

为了使它更好我建议你修改代码看下面的内容

<强>模板：

<div class='ng-modal' ng-show='modalContent != null && modalContent != ""'>
  <div class='ng-modal-overlay' ng-click='hideModal()'></div>
  <div class='ng-modal-dialog' ng-style='dialogStyle'>
    <div class='ng-modal-close' ng-click='hideModal()'>X</div>
    <div class='ng-modal-dialog-content' ng-transclude></div>
    <p>{{ modalContent }}</p>
  </div>
</div>

<强>指令：

app.directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: {
      modalContent: '='
    },
    replace: true, // Replace with the template below
    transclude: true, // we want to insert custom content inside the directive
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
      scope.hideModal = function() {
        scope.modalContent= null;
      };
    },
    template: '...' // See below
  };
});

然后在模板

中使用以下代码

<modal-dialog modal-content='modalMsg' width='750px' height='90%'></modal-dialog>

完成这些更改后，您可以编写一个函数来设置变量“modalMsg”中的消息，而angular将负责休息

注意：代码与链接几乎相同，我唯一改变的是检查以显示模式框

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

3 个答案: