[英]Confirm dialog box in angularjs
How can I apply confirm dialog box in below button in angularjs ? 如何在angularjs中的下方按钮中应用确认对话框?
<button class="btn btn-sm btn-danger" ng-click="removeUser($index)">Delete</button>
Just like this. 像这样。
<span><a class="button" onclick="return confirm('Are you sure to delete this record ?')" href="delete/{{ item.id }}">Delete</span>
Update 更新
Currently I am doing it like this 目前我这样做
function removeUser(index) {
var isConfirmed = confirm("Are you sure to delete this record ?");
if(isConfirmed){
vm.users.splice(index, 1);
}else{
return false;
}
};
Here is the snippets, 这是片段,
how your HTML should be, 你的HTML应该如何,
<button class="btn btn-sm btn-danger" ng-confirm-click="Are you sure to delete this record ?" confirmed-click="removeUser($index)">Delete</button>
Please Include this directive in your custom angularjs file, 请在您的自定义angularjs文件中包含此指令,
app.directive('ngConfirmClick', [
function(){
return {
link: function (scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.confirmedClick;
element.bind('click',function (event) {
if ( window.confirm(msg) ) {
scope.$eval(clickAction)
}
});
}
};
}])
Your angular scope based on your delete function mentioned above, 您的角度范围基于上面提到的删除功能,
$scope.removeUser = function(index) {
vm.users.splice(index, 1);
}
$scope.removeUser= function (ind){
if (confirm("Are you sure?")) {
alert("deleted"+ s);
$window.location.href = 'delete/'+ s;
}
}
http://jsfiddle.net/ms403Ly8/61/ http://jsfiddle.net/ms403Ly8/61/
I would separate the message bit from the delete action bit, that way you could reuse the confirm bit in other parts of your app: I use a directive like so: 我会将消息位与删除操作位分开,这样您就可以在应用程序的其他部分重用确认位:我使用如下指令:
angular.module('myModule').directive("ngConfirmClick", [
function() {
return {
priority: -1,
restrict: "A",
link: function(scope, element, attrs) {
element.bind("click", function(e) {
var message;
message = attrs.ngConfirmClick;
if (message && !confirm(message)) {
e.stopImmediatePropagation();
e.preventDefault();
}
});
}
};
}
]);
then have your controller function with the delete action: 然后让你的控制器功能与删除操作:
$scope.removeUser(index) {
//do stuff
}
and in the View I would use ng-click: 在视图中我会使用ng-click:
<span><a class="button" ng-confirm-click="Are you sure?" ng-click="removeUser(item.id}}">Delete</span>
hope it helps. 希望能帮助到你。
You can try this plunker: http://plnkr.co/edit/xJJFxjYeeHmDixAYPu4c?p=preview You can create a directive for the dialog. 你可以试试这个plunker: http ://plnkr.co/edit/xJJFxjYeeHmDixAYPu4c?p=preview你可以为对话框创建一个指令。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $window) {
$scope.delete = function(id) {
$window.location.href = 'delete/'+ id;
}
});
app.directive('ngConfirmClick', [
function(){
return {
link: function (scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.confirmedClick;
element.bind('click',function (event) {
if ( window.confirm(msg) ) {
scope.$eval(clickAction)
}
});
}
};
}])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.