Anglejsのボタンの下に確認ダイアログボックスを適用するにはどうすればよいですか?
<button class="btn btn-sm btn-danger" ng-click="removeUser($index)">Delete</button>
ちょうどこのような。
<span><a class="button" onclick="return confirm('Are you sure to delete this record ?')" href="delete/{{ item.id }}">Delete</span>
更新
現在、私はこのようにやっています
function removeUser(index) {
var isConfirmed = confirm("Are you sure to delete this record ?");
if(isConfirmed){
vm.users.splice(index, 1);
}else{
return false;
}
};
これがスニペットです。
hTMLのあり方、
<button class="btn btn-sm btn-danger" ng-confirm-click="Are you sure to delete this record ?" confirmed-click="removeUser($index)">Delete</button>
このディレクティブをカスタムの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)
}
});
}
};
}])
上記の削除関数に基づいたangularスコープ、
$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;
}
}
メッセージビットを削除アクションビットから分離し、アプリの他の部分で確認ビットを再利用できるようにします。次のようなディレクティブを使用します。
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();
}
});
}
};
}
]);
次に、削除アクションを使用してコントローラー機能を設定します。
$scope.removeUser(index) {
//do stuff
}
そして、ビューではng-clickを使用します:
<span><a class="button" ng-confirm-click="Are you sure?" ng-click="removeUser(item.id}}">Delete</span>
それが役に立てば幸い。
このプランカーを試すことができます: 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)
}
});
}
};
}])