ng-clickÖzel bir angularjs yönergesi kullanarak bir onay iletişim kutusu kurmaya çalışıyorum :

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

Bu harika çalışıyor, ancak maalesef, yönergemi kullanan etiketin içindeki ifadeler değerlendirilmez:

<button ng-click="sayHi()" ng-confirm-click="Would you like to say hi?">Say hi to {{ name }}</button>

(bu durumda isim değerlendirilmez). Yönergemin terminal parametresinden kaynaklanıyor gibi görünüyor. Herhangi bir geçici çözüm fikriniz var mı?

Kodumu test etmek için: http://plnkr.co/edit/EHmRpfwsgSfEFVMgRLgj?p=preview

Kullanmamaya aldırmazsan ng-click, iyi çalışıyor. Tıklama işleyicisinin iki kez tetiklenmesini önlerken, onu başka bir şeyle yeniden adlandırabilir ve yine de özniteliği okuyabilirsiniz, şu anda sorun var.

http://plnkr.co/edit/YWr6o2?p=preview

Sanırım sorun, terminaldiğer direktifleri çalıştırmama talimatı veriyor. İle veri bağlama , muhtemelen tarafından iptal edilen yönerge {{ }}için sadece bir takma ng-bindaddır terminal.

Temiz bir yönerge yaklaşımı.

Güncelleme: Eski Cevap (2014)

Temelde ng-clickolayı durdurur, ng-confirm-click="message"direktifte bulunan mesajı görüntüler ve kullanıcıdan onaylamasını ister. Onay tıklanırsa normal ng-clickçalıştırılır, değilse betik sona erer ve ng-clickçalıştırılmaz.

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

Zach Snow'a kod kredisi: http://zachsnow.com/#!/blog/2013/confirming-ng-click/

Güncelleme: Yeni Cevap (2016)

1) Birincisi ('ng') yerel açısal yönergeler için ayrıldığından "ng" den "mw" ye değiştirilen önek.

2) ng-tıklama olayına müdahale etmek yerine bir işlevi ve mesajı iletmek için değiştirilmiş yönerge.

3) Varsayılan "Emin misiniz?" mw-confirm-click-message = "" özel bir mesajın sağlanmaması durumunda mesaj.

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

Benim için https://www.w3schools.com/js/js_popup.asp , tarayıcının varsayılan onay iletişim kutusu çok çalıştı. az önce bunu denedim:

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

Basit .. :)
Ama bence onu özelleştiremezsin. "İptal" veya "Tamam" düğmesiyle görünecektir.

DÜZENLE:

İyonik çerçeve kullanıyorsanız, aşağıdaki gibi ionicPopup iletişim kutusunu kullanmanız gerekir:

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

Daha fazla ayrıntı için bkz: $ ionicPopup

Çekirdek javascript + açısal js kullanmak çok basit:

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

Tamam'ı tıklarsanız, silme işlemi gerçekleşecek, aksi takdirde gerçekleşmeyecektir. * id parametredir, silmek istediğiniz kayıt.

terminal: falseDüğmenin içinde işlemeyi engelleyen şey olduğu için kullanmak istemezsiniz . Bunun yerine, varsayılan davranışı önlemek için linktemizleyin 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)
          }
        });
      }
    };
  }
]);

Bugünün tarihinde bu çözüm benim için çalışıyor:

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

Krediler: https://gist.github.com/asafge/7430497#file-ng-really-js

Tam da bu şey için Angular-UI $ modal hizmetine dayanan bir modül yarattım.

https://github.com/Schlogen/angular-confirm

İfadeyi ng-clicksarmak için derleme kullanarak birlikte çalışan yalnızca açısal bir çözüm mümkündür ng-click.

Direktif:

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

Kod her şeyi söylüyor

HTML 5 Kod Örneği

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

AngularJs Özel Direktifi kod örneği

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

Onay iletişim kutusu AngularJS Material kullanılarak uygulanabilir :

$ mdDialog, kullanıcıları kritik bilgiler hakkında bilgilendirmek veya karar vermelerini zorunlu kılmak için uygulama üzerinde bir iletişim kutusu açar. Kurulum için iki yaklaşım vardır: basit bir taahhüt API'si ve normal nesne sözdizimi.

Uygulama örneği: Angular Material - Dialogs

Ui-yönlendirici kullanıyorsanız, iptal veya kabul düğmesi url'nin yerini alır. Bunu önlemek için, aşağıdaki gibi koşullu cümlenin her durumunda yanlış döndürebilirsiniz:

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

Çok basit bir açısal çözüm

İd'yi mesajla veya mesaj olmadan kullanabilirsiniz. Mesaj olmadan varsayılan mesaj gösterilecektir.

Direktif

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

Kontrolör

$scope.sayHello = function(){
    alert("hello")
}

HTML

Bir mesajla

<span ng-click="sayHello()" ng-confirm-message="Do you want to say Hello ?" >Say Hello!</span>

Mesaj olmadan

<span ng-click="sayHello()" ng-confirm-message>Say Hello!</span>

İşte açısal sözlerini kullanarak temiz ve basit bir çözümdür $q, $windowve yerli .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
          }
        });
    };
  });

Burada controllerAssözdizimi ve ES6 ok işlevlerini kullanıyorum ama aynı zamanda düz ES5'te de çalışıyor.

Angularjs'de bootstrap kullanarak onay açılır penceresini silin

çok basit .. Bunun için önyükleme yapılandırma açılır penceresini kullanarak bunun için bir çözümüm var. Burada sağlandım

<button ng-click="deletepopup($index)">Delete</button>

önyükleme modeli açılır penceresinde:

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

sil butonuna tıkladığımda bootstrap konformasyonu sil açılır penceresi açılacak ve evet butonuna tıkladığımda satır silinecek.

ng-tıklama geri dönüşü% 100 çalıştığını onayla

html dosyasında delete_plot () işlevini çağırın

<i class="fa fa-trash delete-plot" ng-click="delete_plot()"></i> 
 
  

Bunu oyun kumandanıza ekleyin

    $scope.delete_plot = function(){
        check = confirm("Are you sure to delete this plot?")
        if(check){
            console.log("yes, OK pressed")
        }else{
            console.log("No, cancel pressed")

        }
    }

Keşke AngularJS'de yerleşik bir onay iletişim kutusu olsaydı. Çoğu zaman, yerleşik tarayıcıyı kullanmaktan daha özelleştirilmiş bir iletişim kutusuna sahip olmak daha iyidir.

Twitter önyüklemesini sürüm 6 ile kesilene kadar kısaca kullandım. Alternatifler için etrafa baktım, ancak bulduklarım karmaşıktı. JQuery UI'yi denemeye karar verdim.

İşte ng ızgarasından bir şey çıkarmak üzereyken aradığım örneğim;

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

Umarım bu birine yardımcı olur. Ui-bootstrap-tpls.js'yi yükseltmem gerektiğinde saçlarımı çekiyordum, ancak mevcut iletişim kutusu bozuldu. Bu sabah işe geldim, birkaç şey denedim ve sonra fazla karmaşık olduğumu fark ettim.