在 AngularJS 中创建一个简单的 Bootstrap 是/否确认或只是通知警报 [英] Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS

问题描述

在非 Angular 环境中如此简单.只需 html 和两行 js 代码即可在屏幕上显示模态确认对话框.

现在我正在开发一个 AngularJS 项目，在这个项目中我到处使用 ui-bootstrap 模式确认对话框，我厌倦了创建新的控制器，即使是简单的事情，比如你确定要删除这条记录吗?"那种东西.

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

我想请您分享您的经验或您了解的有关该主题的项目.

解决方案

为此创建一个可重用的服务... 在这里阅读

代码在这里:

angular.module('yourModuleName').service('modalService', ['$modal',//注意:对于 Angular-bootstrap 0.14.0 或更高版本，使用上面的 $uibModal 而不是 $modal功能($modal){var modalDefaults = {背景:真实，键盘:真的，modalFade: 真,templateUrl: '/app/partials/modal.html'};var modalOptions = {closeButtonText: '关闭',actionButtonText: '好的',headerText: '继续吗?',bodyText: '执行此操作?};this.showModal = 函数(customModalDefaults，customModalOptions){if (!customModalDefaults) customModalDefaults = {};customModalDefaults.backdrop = '静态';返回 this.show(customModalDefaults, customModalOptions);};this.show = 函数(customModalDefaults，customModalOptions){//创建要使用的临时对象，因为我们处于单例服务中var tempModalDefaults = {};var tempModalOptions = {};//将angular-ui模态自定义默认映射到服务中定义的模态默认值angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);//将modal.html $scope 自定义属性映射到服务中定义的默认值angular.extend(tempModalOptions, modalOptions, customModalOptions);如果(！tempModalDefaults.controller){tempModalDefaults.controller = 函数($scope，$modalInstance){$scope.modalOptions = tempModalOptions;$scope.modalOptions.ok = 函数(结果){$modalInstance.close(result);};$scope.modalOptions.close = 函数(结果){$modalInstance.dismiss('cancel');};};}返回 $modal.open(tempModalDefaults).result;};}]);

用于显示的html

<h3>{{modalOptions.headerText}}</h3>
<div class="modal-body"><p>{{modalOptions.bodyText}}</p>

<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>

一旦完成...你只需要在任何你想创建对话框的地方注入上面的服务，例子如下

 $scope.deleteCustomer = function () {var custName = $scope.customer.firstName + ' ' + $scope.customer.lastName;var modalOptions = {closeButtonText: '取消',actionButtonText: '删除客户',headerText: '删除' + custName + '?',bodyText: '您确定要删除该客户吗?};modalService.showModal({}, modalOptions).then(函数(结果){//您的自定义逻辑});}

It's so simple in a non-Angular environment. Just html and a two line of js code to show a modal confirmation dialog on the screen.

Now I am developting an AngularJS project in which I am using ui-bootstrap modal confirmation dialogs all over the place and I am sick of creating new controllers even for simple things like "Are you sure to delete this record?" kind of stuff.

How do you handle these simple situations? I am sure some people wrote some directives to simplify the needs.

I am asking you to share your experiences or the projects you know about that subject.

解决方案

so create a reusable service for that... read here

code here:

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 for display

<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>

once this is done... you just have to inject above service whereever you want to create a dialog box, example below

 $scope.deleteCustomer = function () {

    var custName = $scope.customer.firstName + ' ' + $scope.customer.lastName;


    var modalOptions = {
        closeButtonText: 'Cancel',
        actionButtonText: 'Delete Customer',
        headerText: 'Delete ' + custName + '?',
        bodyText: 'Are you sure you want to delete this customer?'
    };

    modalService.showModal({}, modalOptions)
        .then(function (result) {
             //your-custom-logic
        });
}

这篇关于在 AngularJS 中创建一个简单的 Bootstrap 是/否确认或只是通知警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！