[Javascript] एनजी-क्लिक पर पुष्टि संवाद - AngularJS


Answers

एक स्वच्छ निर्देश दृष्टिकोण।

अद्यतन: पुराना उत्तर (2014)

यह मूल रूप से ng-click ईवेंट को रोकता है, ng-confirm-click="message" निर्देश में निहित संदेश प्रदर्शित करता है और उपयोगकर्ता को पुष्टि करने के लिए कहता है। अगर पुष्टि सामान्य ng-click निष्पादित पर ng-click , यदि स्क्रिप्ट समाप्त नहीं होती है और 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') देशी कोणीय निर्देशों के लिए आरक्षित किया गया है।

2) एनजी-क्लिक घटना को रोकने के बजाय एक समारोह और संदेश को पारित करने के लिए संशोधित निर्देश।

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

मैं एक कस्टम angularjs निर्देश का उपयोग कर एक ng-click पर एक पुष्टिकरण संवाद स्थापित करने की कोशिश कर रहा हूँ:

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 अभिव्यक्ति को लपेटने के लिए संकलन का उपयोग करके 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.delete = function(id) 
    { 
       if (confirm("Are you sure?"))
           {
                //do your process of delete using angular js.
           }
   }

यदि आप ठीक क्लिक करते हैं, तो ऑपरेशन हटाएगा, अन्यथा नहीं। * आईडी पैरामीटर है, रिकॉर्ड है कि आप हटाना चाहते हैं।




एचटीएमएल 5 कोड नमूना

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



आज की तारीख में यह समाधान मेरे लिए काम करता है:

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




मेरी इच्छा है कि AngularJS को पुष्टि संवाद में बनाया गया हो। प्रायः, ब्राउज़र में निर्मित एक का उपयोग करने के बजाय एक अनुकूलित संवाद होना अच्छा होता है।

मैंने संक्षेप में ट्विटर बूटस्ट्रैप का उपयोग तब तक किया जब तक इसे संस्करण 6 के साथ बंद नहीं किया गया। मैंने विकल्पों के लिए चारों ओर देखा, लेकिन जो मुझे मिला वह जटिल था। मैंने JQuery UI को आजमाने का फैसला किया।

यहां मेरा नमूना है जिसे मैं कॉल करता हूं जब मैं एनजी-ग्रिड से कुछ निकालने वाला हूं;

    // 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 को अपग्रेड करना चाहता था तो मैं अपने बालों को खींच रहा था लेकिन यह मेरे मौजूदा संवाद को तोड़ दिया। मैं आज सुबह काम में आया, कुछ चीजों की कोशिश की और फिर एहसास हुआ कि मैं जटिल हो रहा था।




एक बहुत ही सरल कोणीय समाधान

आप किसी संदेश के साथ या बिना आईडी का उपयोग कर सकते हैं। संदेश के बिना डिफ़ॉल्ट संदेश दिखाएगा।

आदेश

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

एचटीएमएल

एक संदेश के साथ

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



Angularjs में बूटस्ट्रैप का उपयोग कर पुष्टिकरण पॉपअप हटाएं

बहुत सरल .. बूटस्ट्रैप संरचना पॉपअप का उपयोग करने के साथ मेरे पास इसका एक समाधान है। यहां मुझे प्रदान किया गया है

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

जब मैं डिलीट बटन बूटस्ट्रैप हटाएं पर क्लिक करता हूं तो रूपांतरण पॉपअप खुल जाएगा और जब मैं हाँ बटन पंक्ति पर क्लिक करूंगा।






Links