86

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

4

17 に答える 17

47

私にとって、https://www.w3schools.com/js/js_popup.asp、ブラウザのデフォルトの確認ダイアログボックスは非常にうまく機能しました。これを試してみました：

$scope.delete = function() {
    if (confirm("sure to delete")) {
        // todo code for deletion
    }
};

シンプル.. :)
しかし、カスタマイズできないと思います。「キャンセル」または「OK」ボタンとともに表示されます。

編集：

ionic フレームワークを使用している場合は、次のように 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

于 2014-10-01T07:30:57.583 に答える
11

コアjavascript + angular jsを使用するととても簡単です：

$scope.delete = function(id) 
    { 
       if (confirm("Are you sure?"))
           {
                //do your process of delete using angular js.
           }
   }

[OK] をクリックすると、削除操作が実行されます。それ以外の場合は実行されません。* id はパラメーター、削除するレコードです。

于 2015-06-08T11:21:40.187 に答える
4

今日の日付では、このソリューションは私にとってはうまくいきます:

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

于 2014-07-10T19:03:19.543 に答える
4

An angular-only solution that works alongside ng-click is possible by using compile to wrap the ng-click expression.

Directive:

.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>
于 2015-08-08T16:13:20.180 に答える
1

HTML5 コードサンプル

<button href="#" ng-click="shoutOut()" confirmation-needed="Do you really want to
shout?">Click!</button>

AngularJs カスタム ディレクティブのコード サンプル

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();
       });
     }
    };
});
于 2015-01-09T09:42:00.593 に答える
0

angular promises とネイティブモーダルを使用したクリーンでシンプルなソリューションを次に$q示し$windowます.confirm()。

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 アロー関数を使用していますが、普通の ES5 でも機能します。

于 2016-05-07T06:57:12.490 に答える
0

angularjsでブートストラップを使用して確認ポップアップを削除します

非常に簡単です..ブートストラップコンフォメーションポップアップを使用して、これに対する1つの解決策があります。ここで私は提供されます

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

削除ボタンをクリックすると、ブートストラップ削除コンフォメーションポップアップが開き、はいボタンをクリックすると行が削除されます。

于 2017-05-24T10:27:52.107 に答える