Создать простой бутстрап Да / Нет подтверждение или просто уведомление в AngularJS

поэтому создайте повторно используемую услугу для этого … читайте здесь

код здесь:

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 для отображения

 
 
{{modalOptions.headerText}}
 
 
 
{{modalOptions.bodyText}}
 
 
 {{modalOptions.closeButtonText}} {{modalOptions.actionButtonText}}  

как только это будет сделано … вам просто нужно ввести выше службы, если вы хотите создать диалоговое окно, пример ниже

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

Вы можете увидеть мой пример. что бы я ни делал.

  
 Delete   

скрипт

  var app = angular.module("myApp", []); app.controller('firstCtrl', ['$scope','$window', function($scope,$window) { $scope.delete = function(id) { deleteUser = $window.confirm('Are you sure you want to delete the Ad?'); if(deleteUser){ //Your action will goes here alert('Yes i want to delete'); } }; }]) 

Вы можете использовать библиотеку « Угловое подтверждение» .

Когда он включен, он становится доступным в качестве директивы:

 Delete 

Помимо услуги:

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

Для всего, что имеет код, который запускается с помощью ng-click, я просто добавляю атрибут подтверждения

например

и подтверждение приходит от (не моего, найденного в Интернете)

 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: '
Confirm
{{data.text}}
OKCancel
', 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); } } } }) 

Мой google FOO подвел меня, и я не могу найти исходный сайт для этого. Я обновлю, если найду его.

Вы можете создать простую фабрику, подобную этой

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

В вашем controllerе

 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 и в случае, если вы хотите получить доступ к некоторым данным вашего controllerа. В вашем html

 Open Modal