在AngularJS中创建一个简单的引导是/否确认或只是通知警报

在一个没有角度的环境中，这很简单。只需html和两行js代码即可在屏幕上显示模式确认对话框

现在我正在开发一个AngularJS项目，在这个项目中，我到处使用ui引导模式确认对话框，我厌倦了创建新的控制器，即使是像“你确定要删除这个记录吗？”之类的简单事情

你如何处理这些简单的情况？我相信有些人写了一些指令来简化需求

---

我要求你分享你的经验或你知道的关于这个主题的项目。

因此，为这个主题创建一个可重用的服务

代码如下：

angular.module('yourModuleName').service('modalService', ['$modal',
// NB: For Angular-bootstrap 0.14.0 or later, use $uibModal above instead of $modal
function ($modal) {

    var modalDefaults = {
        backdrop: true,
        keyboard: true,
        modalFade: true,
        templateUrl: '/app/partials/modal.html'
    };

    var modalOptions = {
        closeButtonText: 'Close',
        actionButtonText: 'OK',
        headerText: 'Proceed?',
        bodyText: 'Perform this action?'
    };

    this.showModal = function (customModalDefaults, customModalOptions) {
        if (!customModalDefaults) customModalDefaults = {};
        customModalDefaults.backdrop = 'static';
        return this.show(customModalDefaults, customModalOptions);
    };

    this.show = function (customModalDefaults, customModalOptions) {
        //Create temp objects to work with since we're in a singleton service
        var tempModalDefaults = {};
        var tempModalOptions = {};

        //Map angular-ui modal custom defaults to modal defaults defined in service
        angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

        //Map modal.html $scope custom properties to defaults defined in service
        angular.extend(tempModalOptions, modalOptions, customModalOptions);

        if (!tempModalDefaults.controller) {
            tempModalDefaults.controller = function ($scope, $modalInstance) {
                $scope.modalOptions = tempModalOptions;
                $scope.modalOptions.ok = function (result) {
                    $modalInstance.close(result);
                };
                $scope.modalOptions.close = function (result) {
                    $modalInstance.dismiss('cancel');
                };
            };
        }

        return $modal.open(tempModalDefaults).result;
    };

}]);

用于显示的html

<div class="modal-header">
  <h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
  <p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn" 
          data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
  <button class="btn btn-primary" 
          data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
</div>

---

你可以看到我的例子。不管我做了什么

  <div ng-app="myApp" ng-controller="firstCtrl">
    <button ng-click="delete(1);">Delete </button>
  </div>

---

您可以创建这样一个简单的工厂

angular.module('app')
.factory('modalService', [
    '$modal', function ($modal) {
        var self = this;
        var modalInstance = null;
        self.open = function (scope, path) {
            modalInstance = $modal.open({
                templateUrl: path,
                scope: scope
            });
        };

        self.close = function () {
            modalInstance.dismiss('close');
        };
        return self;
        }
]);

在控制器中

angular.module('app').controller('yourController',  
  ['$scope','modalService',function($scope,modalService){

$scope.openModal=function(){
 modalService.open($scope,'modal template path goes here');
 };

$scope.closeModal=function(){
 modalService.close();
//do something on modal close
 };
 }]);

我已经在服务功能中传递了

$scope

，这样您就可以访问closeModal功能，以防您想访问控制器中的某些数据。 在html中

<button ng-click="openModal()">Open Modal</button>

开放模式

对于任何具有通过ng单击触发的代码的内容，我只需添加一个确认属性

乙二醇

确认来自（不是我的，在网上找到的）

app.controller（'ConfirmModalController'，函数（$scope，$modalInstance，data）{
$scope.data=angular.copy（数据）；
$scope.ok=函数（）{
$modalInstance.close（）；
};
$scope.cancel=函数（）{
$modalInstance.disclose（'cancel'）；
};
}).value（“$confirmModalDefaults”{
模板：“确认{{data.text}}确定取消”，
控制器：“ConfirmModalController”
}).factory（“$confirm”，函数（$modal，$confirmModalDefaults）{
返回功能（数据、设置）{
settings=angular.extend（$confirmModalDefaults，（settings |{}））；
数据=数据|{}；
如果（'templateUrl'在设置中&&'template'在设置中）{
删除设置.模板；
}
settings.resolve={data:function（）{return data；}}；
返回$modal.open（设置）.result；
};
})
.指令（'confirm'，函数（$confirm）{
返回{
优先事项：1，
限制：“A”，
范围：{
确认：“=”，
ngClick:“&”，
确认：“@”
},
链接：函数（范围、元素、属性）{
函数重新绑定（func）{
元素。解除绑定（“单击”）。绑定（“单击”，函数（）{
func（）；
});
}
函数bindConfirm（）{
$confirm（{text:scope.confirm}）。然后（scope.ngClick）；
}
if（属性中的“confirmIf”）{
范围$watch（'confirmIf'，函数（newVal）{
if（newVal）{
重新绑定（绑定确认）；
}否则{
重新绑定（函数（）{
scope.$apply（scope.ngClick）；
});
}
});
}否则{
重新绑定（绑定确认）；
}
}
}
})

我的GoogleFoo让我失望了，我找不到这个源站点。如果我找到它，我将进行更新。

您可以使用该库

当包含时，它将作为指令提供：

<button type="button" ng-click="delete()" confirm="Are you sure?">Delete</button>

---

这个实现将帮助您@Chandermani看起来不错。现在正在检查文档，谢谢@Chandermani说实现还需要创建一个额外的控制器，它不能满足我的需要confirm@Chandermani）我猜你错过了“引导模态对话框”部分：）谢谢你的回答，不过…这看起来像是一种在全球范围内使用对话框的优雅方式。我将等待其他答案，然后接受你的答案，直到我同意为止。谢谢给我你的问题的链接，将把必要的代码一个答案能够使用这个模式，一个必须做到以下几点：1。在index.html 2中加载

ui-bootstrap-0.14.3.js

（或相应的文件版本）。将

ui.bootstrap

声明为应用程序的依赖项，如下所示：

angular.module（'testApp'，['ui.bootstrap']）。如果包括最新版本，则在上述模式服务代码中，将
$modal
替换为
$uibModal
并将
$modalInstance
替换为
$uibModalInstance
。任何人在执行代码中的此行后，对未知提供程序提供程序有问题？在控制台中显示此错误消息：返回$modal.open（tempModalDefaults）。结果；错误：未知提供程序：提供@entre建议的简化版本。感谢您的回答。如果我在确认模式窗口中单击“是”或“否”，该解决方案将如何处理？简单易懂。我一有时间就去试试。谢谢，@Steve Drakethanks，我是angular的新手，我发现有很多方法可以做事情，我选择了这一个，因为我喜欢你只是有一个属性，你去，你也可以有一个confirmif属性返回bool。谢谢！很高兴知道：）链接被断开了！@walla，修复了！
<button ng-click="openModal()">Open Modal</button>

<a confirm="Are you sure?" ng-click="..."></a>

app.controller('ConfirmModalController', function($scope, $modalInstance, data) {
        $scope.data = angular.copy(data);

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

        $scope.cancel = function() {
            $modalInstance.dismiss('cancel');
        };
    }).value('$confirmModalDefaults', {
        template: '<div class="modal-header"><h3 class="modal-title">Confirm</h3></div><div class="modal-body">{{data.text}}</div><div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>',
        controller: 'ConfirmModalController'
    }).factory('$confirm', function($modal, $confirmModalDefaults) {
        return function(data, settings) {
            settings = angular.extend($confirmModalDefaults, (settings || {}));
            data = data || {};

            if ('templateUrl' in settings && 'template' in settings) {
                delete settings.template;
            }

            settings.resolve = { data: function() { return data; } };

            return $modal.open(settings).result;
        };
    })
    .directive('confirm', function($confirm) {
        return {
            priority: 1,
            restrict: 'A',
            scope: {
                confirmIf: "=",
                ngClick: '&',
                confirm: '@'
            },
            link: function(scope, element, attrs) {
                function reBind(func) {
                    element.unbind("click").bind("click", function() {
                        func();
                    });
                }

                function bindConfirm() {
                    $confirm({ text: scope.confirm }).then(scope.ngClick);
                }

                if ('confirmIf' in attrs) {
                    scope.$watch('confirmIf', function(newVal) {
                        if (newVal) {
                            reBind(bindConfirm);
                        } else {
                            reBind(function() {
                                scope.$apply(scope.ngClick);
                            });
                        }
                    });
                } else {
                    reBind(bindConfirm);
                }
            }
        }
    })

<button type="button" ng-click="delete()" confirm="Are you sure?">Delete</button>

angular.module('MyApp')
  .controller('MyController', function($scope, $confirm) {
    $scope.delete = function() {
      $confirm({text: 'Are you sure you want to delete?', title: 'Delete it', ok: 'Yes', cancel: 'No'})
        .then(function() {
          // send delete request...
        });
    };
  });