angularjs - bootstrap - ng-if

Cree una confirmación de Bootstrap Sí/No simple o solo una alerta de notificación en AngularJS

Question

Es tan simple en un entorno no angular. Solo html y una línea de código js para mostrar un cuadro de diálogo de confirmación modal en la pantalla.

Ahora estoy desarrollando un proyecto AngularJS en el que estoy usando diálogos de confirmación modal ui-bootstrap por todas partes y estoy cansado de crear nuevos controladores incluso para cosas simples como "¿Estás seguro de borrar este registro?" tipo de cosas.

¿Cómo manejas estas situaciones simples? Estoy seguro de que algunas personas escribieron algunas directivas para simplificar las necesidades.

Te pido que compartas tus experiencias o los proyectos que conoces sobre ese tema.

Answer 1

Para cualquier cosa que tenga código que se active con un ng-clic, simplemente agrego un atributo de confirmación

p.ej

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

y confirmar proviene de (no mío, encontrado en la web)

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

Mi Google FOO me ha fallado y no puedo encontrar el sitio de origen para esto. Actualizaré si lo encuentro.

Answer 2

Puede crear una fábrica simple como esta

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

En tu controlador

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

He pasado $scope en la función de servicio para que pueda acceder a la función de CloseModal y en caso de que quiera acceder a algunos datos de su controlador. En tu html

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

Answer 3

Puede usar la biblioteca de confirmación angular .

Cuando se incluye, está disponible como directiva:

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

Además de un servicio:

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

Answer 4

Puedes ver mi ejemplo. lo que sea que haya hecho

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

guión

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

Answer 5

así que crea un servicio reutilizable para eso ... lee aquí

código aquí:

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

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

una vez hecho esto ... solo tiene que inyectar el servicio anterior donde desee crear un cuadro de diálogo, ejemplo a continuación

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