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

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

因此，为此创建可重复使用的服务… 阅读此处

代码在这里：

angular.module('yourModuleName').service('modalService', ['$modal',// NB: For Angular-bootstrap 0.14.0 or later, use $uibModal above instead of $modalfunction ($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 >  <h3>{{modalOptions.headerText}}</h3></div><div >  <p>{{modalOptions.bodyText}}</p></div><div >  <button type="button" data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>  <button data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button></div>

一旦完成此 *** 作，您只需在要创建对话框的任何地方注入以上服务，如下所示

 $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        });}