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




angularjs-directive angularjs-scope (14)

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

/**
 * 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 निर्देश का उपयोग कर एक 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


मैंने इस बात के लिए एक मॉड्यूल बनाया है जो कोणीय-यूआई $ मोडल सेवा पर निर्भर करता है।

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


पुष्टिकरण संवाद AngularJS सामग्री का उपयोग करके कार्यान्वित किया जा सकता है:

$ mdDialog उपयोगकर्ताओं को महत्वपूर्ण जानकारी के बारे में सूचित करने के लिए ऐप पर एक संवाद खोलता है या उन्हें निर्णय लेने की आवश्यकता होती है। सेटअप के लिए दो दृष्टिकोण हैं: एक साधारण वादा एपीआई और नियमित ऑब्जेक्ट सिंटैक्स।

कार्यान्वयन उदाहरण: कोणीय सामग्री - संवाद


आप terminal: false का उपयोग नहीं करना चाहते हैं terminal: false क्योंकि बटन के अंदर प्रसंस्करण को अवरुद्ध कर रहा है। इसके बजाय, आपके link में 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)
          }
        });
      }
    };
  }
]);

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

कोड सबकुछ कहता है


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

अद्यतन: पुराना उत्तर (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();
          }
        });
      }
    }
  }
]);

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>

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

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


कोर जावास्क्रिप्ट + कोणीय जेएस का उपयोग करके यह इतना आसान है:

$scope.delete = function(id) 
    { 
       if (confirm("Are you sure?"))
           {
                //do your process of delete using angular 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 को अपग्रेड करना चाहता था तो मैं अपने बालों को खींच रहा था लेकिन यह मेरे मौजूदा संवाद को तोड़ दिया। मैं आज सुबह काम में आया, कुछ चीजों की कोशिश की और फिर एहसास हुआ कि मैं जटिल हो रहा था।


मेरे लिए, https://www.w3schools.com/js/js_popup.asp , ब्राउज़र के डिफ़ॉल्ट पुष्टिकरण संवाद बॉक्स ने एक बड़ा सौदा किया। बस यह कोशिश की:

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

सरल.. :)
लेकिन मुझे लगता है कि आप इसे अनुकूलित नहीं कर सकते हैं। यह "रद्द करें" या "ठीक" बटन के साथ दिखाई देगा।

संपादित करें:

यदि आप आयनिक ढांचे का उपयोग कर रहे हैं, तो आपको आयनिकपॉप संवाद का उपयोग करने की आवश्यकता है:

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


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

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

आदेश

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>

कोणीय वादे $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 एएस सिंटैक्स और ईएस 6 तीर फ़ंक्शंस का उपयोग कर रहा हूं लेकिन यह सादा ओल 'ES5 में भी काम कर रहा है।


असल में, यदि आप AngularJS का उपयोग कर रहे हैं, तो आपको अब jQuery की आवश्यकता नहीं है। AngularJS में बाध्यकारी और निर्देश है, जो कि आप jQuery के साथ कर सकते हैं ज्यादातर चीजों के लिए एक बहुत अच्छा "प्रतिस्थापन" है।

मैं आमतौर पर AngularJS और Cordova का उपयोग कर मोबाइल एप्लिकेशन विकसित करता हूं । JQuery की केवल एक चीज मुझे चयनकर्ता है।

गुगल करके, मैं देखता हूं कि वहाँ एक स्टैंडअलोन jQuery चयनकर्ता मॉड्यूल है। यह झींगा है।

और मैंने एक छोटा कोड स्निपेट बनाने का फैसला किया जो मुझे jQuery चयनकर्ता (Sizzle का उपयोग करके) के साथ AngularJS का उपयोग कर वेबसाइट शुरू करने में मदद करता है।

मैंने अपना कोड यहां साझा किया: https://github.com/huytd/Sizzular







javascript angularjs angularjs-directive angularjs-scope