Я пытаюсь настроить диалог подтверждения на ng-click с помощью настраиваемой директивы angularjs:
app.directive('ngConfirmClick', [
function(){
return {
priority: 1,
terminal: true,
link: function (scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.ngClick;
element.bind('click',function (event) {
if ( window.confirm(msg) ) {
scope.$eval(clickAction)
}
});
}
};
}])
Это отлично работает, но, к сожалению, выражения внутри тега с использованием моей директивы не оцениваются:
<button ng-click="sayHi()" ng-confirm-click="Would you like to say hi?">Say hi to {{ name }}</button>
(имя не оценивается в этом случае). Кажется, это связано с терминальным параметром моей директивы. Есть ли у вас идеи обходных решений?
Чтобы проверить код: http://plnkr.co/edit/EHmRpfwsgSfEFVMgRLgj?p=preview
Если вы не против использования ng-click, он работает нормально. Вы можете просто переименовать его во что-то еще и по-прежнему читать атрибут, избегая при этом двойной проблемы с обработчиком щелчка.
http://plnkr.co/edit/YWr6o2?p=preview
Я думаю, что проблема terminal запрещает запуск других директив. Связывание данных с {{ }} является просто псевдонимом для директивы ng-bind, которая предположительно отменяется на terminal.
Обновление: старый ответ (2014)
Он в основном перехватывает событие ng-click, отображает сообщение, содержащееся в директиве ng-confirm-click="message", и просит пользователя подтвердить. Если нажата кнопка подтверждения, выполняется нормальный ng-click, если не завершен script и ng-click.
<!-- index.html -->
<button ng-click="publish()" ng-confirm-click="You are about to overwrite your PUBLISHED content!! Are you SURE you want to publish?">
Publish
</button>
// /app/directives/ng-confirm-click.js
Directives.directive('ngConfirmClick', [
function(){
return {
priority: -1,
restrict: 'A',
link: function(scope, element, attrs){
element.bind('click', function(e){
var message = attrs.ngConfirmClick;
// confirm() requires jQuery
if(message && !confirm(message)){
e.stopImmediatePropagation();
e.preventDefault();
}
});
}
}
}
]);
Кодовый кредит для Зак Снег: http://zachsnow.com/#!/blog/2013/confirming-ng-click/
Обновление: новый ответ (2016)
1) Изменен префикс от 'ng' до 'mw', поскольку первый ('ng') зарезервирован для собственных директив angular.
2) Измененная директива для передачи функции и сообщения вместо перехвата события ng-click.
3) Добавлен по умолчанию "Вы уверены?" сообщение в случае, если пользовательское сообщение не предоставлено mw-confirm-click-message = "".
<!-- index.html -->
<button mw-confirm-click="publish()" mw-confirm-click-message="You are about to overwrite your PUBLISHED content!! Are you SURE you want to publish?">
Publish
</button>
// /app/directives/mw-confirm-click.js
"use strict";
var module = angular.module( "myApp" );
module.directive( "mwConfirmClick", [
function( ) {
return {
priority: -1,
restrict: 'A',
scope: { confirmFunction: "&mwConfirmClick" },
link: function( scope, element, attrs ){
element.bind( 'click', function( e ){
// message defaults to "Are you sure?"
var message = attrs.mwConfirmClickMessage ? attrs.mwConfirmClickMessage : "Are you sure?";
// confirm() requires jQuery
if( confirm( message ) ) {
scope.confirmFunction();
}
});
}
}
}
]);
Для меня http://www.w3schools.com/js/js_popup.asp, диалоговое окно подтверждения по умолчанию браузера много работало. просто попробовал это:
$scope.delete = function() {
if (confirm("sure to delete")) {
// todo code for deletion
}
};
Простой..:)
Но я думаю, вы не можете его настроить. Он появится с кнопкой "Отмена" или "ОК".
EDIT:
Если вы используете ионную структуру, вам необходимо использовать диалог ionicPopup, как в:
// A confirm dialog
$scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: 'Delete',
template: 'Are you sure you want to delete this item?'
});
confirmPopup.then(function(res) {
if(res) {
// Code to be executed on pressing ok or positive response
// Something like remove item from list
} else {
// Code to be executed on pressing cancel or negative response
}
});
};
Подробнее см. $ionicPopup
Его так просто, используя ядро javascript + angular js:
$scope.delete = function(id)
{
if (confirm("Are you sure?"))
{
//do your process of delete using angular js.
}
}
Если вы нажмете OK, то удалите операцию, иначе нет. * id - это параметр, запись, которую вы хотите удалить.
Вы не хотите использовать terminal: false, поскольку это блокирует обработку внутри кнопки. Вместо этого в link снимите attr.ngClick, чтобы предотвратить поведение по умолчанию.
http://plnkr.co/edit/EySy8wpeQ02UHGPBAIvg?p=preview
app.directive('ngConfirmClick', [
function() {
return {
priority: 1,
link: function(scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.ngClick;
attr.ngClick = "";
element.bind('click', function(event) {
if (window.confirm(msg)) {
scope.$eval(clickAction)
}
});
}
};
}
]);
В настоящее время это решение работает для меня:
/**
* A generic confirmation for risky actions.
* Usage: Add attributes: ng-really-message="Are you sure"? ng-really-click="takeAction()" function
*/
angular.module('app').directive('ngReallyClick', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
var message = attrs.ngReallyMessage;
if (message && confirm(message)) {
scope.$apply(attrs.ngReallyClick);
}
});
}
}
}]);
Кредиты: https://gist.github.com/asafge/7430497#file-ng-really-js
Я создал модуль для этого, который полагается на Angular -UI $модальный сервис.
А angular - единственное решение, которое работает рядом с ng-click, возможно с помощью компиляции для обертывания выражения ng-click.
Директива
.directive('confirmClick', function ($window) {
var i = 0;
return {
restrict: 'A',
priority: 1,
compile: function (tElem, tAttrs) {
var fn = '$$confirmClick' + i++,
_ngClick = tAttrs.ngClick;
tAttrs.ngClick = fn + '($event)';
return function (scope, elem, attrs) {
var confirmMsg = attrs.confirmClick || 'Are you sure?';
scope[fn] = function (event) {
if($window.confirm(confirmMsg)) {
scope.$eval(_ngClick, {$event: event});
}
};
};
}
};
});
HTML:
<a ng-click="doSomething()" confirm-click="Are you sure you wish to proceed?"></a>
$scope.MyUpdateFunction = function () {
var retVal = confirm("Do you want to save changes?");
if (retVal == true) {
$http.put('url', myData).
success(function (data, status, headers, config) {
alert('Saved');
}).error(function (data, status, headers, config) {
alert('Error while updating');
});
return true;
} else {
return false;
}
}
Код говорит обо всем
HTML 5 Пример кода
<button href="#" ng-click="shoutOut()" confirmation-needed="Do you really want to
shout?">Click!</button>
Пример кода Directive Directive для пользовательских директив
var app = angular.module('mobileApp', ['ngGrid']);
app.directive('confirmationNeeded', function () {
return {
link: function (scope, element, attr) {
var msg = attr.confirmationNeeded || "Are you sure?";
var clickAction = attr.ngClick;
element.bind('click',function (e) {
scope.$eval(clickAction) if window.confirm(msg)
e.stopImmediatePropagation();
e.preventDefault();
});
}
};
});
Я хочу, чтобы у AngularJS был встроенный диалог подтверждения. Часто лучше иметь настраиваемый диалог, чем использовать встроенный браузер.
Я кратко использовал загрузочный твиттер, пока он не был прекращен с версии 6. Я оглянулся на альтернативы, но те, которые я нашел, были сложными. Я решил попробовать JQuery UI один.
Вот мой пример, который я вызываю, когда я собираюсь удалить что-то из ng-grid;
// Define the Dialog and its properties.
$("<div>Are you sure?</div>").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 150,
width: 400,
buttons: {
"Yes": function () {
$(this).dialog('close');
//proceed with delete...
/*commented out but left in to show how I am using it in angular
var index = $scope.myData.indexOf(row.entity);
$http['delete']('/EPContacts.svc/json/' + $scope.myData[row.rowIndex].RecordID).success(function () { console.log("groovy baby"); });
$scope.gridOptions.selectItem(index, false);
$scope.myData.splice(index, 1);
*/
},
"No": function () {
$(this).dialog('close');
return;
}
}
});
Надеюсь, это поможет кому-то. Я вытягивал свои волосы, когда мне нужно было обновить ui-bootstrap-tpls.js, но он сломал мой существующий диалог. Сегодня утром я пришел в работу, попробовал несколько вещей, а потом понял, что я слишком усложняюсь.
Если вы используете ui-router, кнопка отмены или принятия замените URL-адрес. Чтобы предотвратить это, вы можете вернуть false в каждом случае условного предложения следующим образом:
app.directive('confirmationNeeded', function () {
return {
link: function (scope, element, attr) {
var msg = attr.confirmationNeeded || "Are you sure?";
var clickAction = attr.confirmedClick;
element.bind('click',function (event) {
if ( window.confirm(msg) )
scope.$eval(clickAction);
return false;
});
}
}; });
Вы можете использовать id с сообщением или без него. Без сообщения появится сообщение по умолчанию.
Директива
app.directive('ngConfirmMessage', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('click', function (e) {
var message = attrs.ngConfirmMessage || "Are you sure ?";
if (!confirm(message)) {
e.stopImmediatePropagation();
}
});
}
}
}]);
контроллер
$scope.sayHello = function(){
alert("hello")
}
HTML
С сообщением
<span ng-click="sayHello()" ng-confirm-message="Do you want to say Hello ?" >Say Hello!</span>
Без беспорядка
<span ng-click="sayHello()" ng-confirm-message>Say Hello!</span>
Вот чистое и простое решение с использованием angular promises $q, $window и native .confirm() modal:
angular.module('myApp',[])
.controller('classicController', ( $q, $window ) => {
this.deleteStuff = ( id ) => {
$q.when($window.confirm('Are you sure ?'))
.then(( confirm ) => {
if ( confirm ) {
// delete stuff
}
});
};
});
Здесь я использую синтаксис controllerAs и функции ES6 arrow, но он также работает в простой версии ES5.
очень просто.. У меня есть одно решение для этого с использованием всплывающего окна бутстрапа. Здесь я обеспечен
<button ng-click="deletepopup($index)">Delete</button>
в всплывающем окне начальной загрузки:
<div class="modal-footer">
<a href="" data-dismiss="modal" ng-click="deleteData()">Yes</a>
<a href="" data-dismiss="modal">No</a>
</div>
JS
var index=0;
$scope.deleteData=function(){
$scope.model.contacts.splice(index,1);
}
// delete a row
$scope.deletepopup = function ($index) {
index=$index;
$('#myModal').modal('show');
};
когда я нажимаю кнопку "Удалить", кнопка "bootstrap delete conformation" всплывает, и когда я нажимаю кнопку "Да", строка удаляется.
Диалог подтверждения можно реализовать с помощью Материал AngularJS:
$mdDialog открывает диалоговое окно приложения, чтобы информировать пользователей о критических информации или требовать от них принятия решений. Есть два подходы к настройке: простой API обещаний и регулярный синтаксис объекта.
Пример реализации: Angular Материал - Диалоги