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

Question 1

मैं 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

Question 2

यदि आप उपयोग नहीं करने का मन नहीं है ng-click, यह ठीक काम करता है। आप बस इसे किसी और चीज़ में बदल सकते हैं और फिर भी विशेषता पढ़ सकते हैं, जबकि क्लिक हैंडलर से बचने के लिए दो बार समस्या उत्पन्न हो रही है।

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

मुझे लगता है कि समस्या terminalअन्य निर्देशों को नहीं चलाने का निर्देश है। डेटा-बाइंडिंग निर्देश के {{ }}लिए केवल एक अन्य नाम है ng-bind, जिसे संभवतः रद्द कर दिया गया है terminal।

Question 3

एक साफ निर्देश दृष्टिकोण।

अपडेट: पुराना उत्तर (2014)

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

2) एनजी-क्लिक इवेंट को इंटरसेप्ट करने के बजाय एक फ़ंक्शन और संदेश पारित करने के लिए संशोधित निर्देश।

3) डिफ़ॉल्ट रूप से जोड़ा गया "क्या आपको यकीन है?" इस मामले में संदेश कि mw- पुष्टि-क्लिक-संदेश = "" के लिए एक कस्टम संदेश प्रदान नहीं किया गया है।

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

मेरे लिए, 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
     }
   });
 };

अधिक जानकारी के लिए, देखें: $ आयनिकपॉप

Question 5

कोर जावास्क्रिप्ट + कोणीय js का उपयोग कर इसका इतना सरल:

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

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

Question 6

आप इसका उपयोग नहीं करना चाहते हैं 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)
          }
        });
      }
    };
  }
]);

Question 7

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

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

Question 8

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

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

Question 9

कोणीय 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>

Question 10

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

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

Question 11

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

Question 12

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

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

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

Question 13

यदि आप यूआई-राउटर का उपयोग करते हैं, तो रद्द करें या स्वीकार करें बटन url को बदलें। इसे रोकने के लिए आप इस तरह के सशर्त वाक्य के प्रत्येक मामले में झूठे वापस कर सकते हैं:

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

Question 14

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

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

आदेश

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>

Question 15

यहाँ एक स्वच्छ और सरल कोणीय वादों का उपयोग कर समाधान है $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 एरो फ़ंक्शंस का उपयोग कर रहा हूँ, लेकिन यह सादे ol 'ES5 में भी काम कर रहा है।

Question 16

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

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

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

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

Question 17

एनजी-क्लिक रिटर्न 100% कार्यों की पुष्टि करता है

in html फ़ाइल कॉल delete_plot () फ़ंक्शन

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

इसे अपने कंट्रोलर में जोड़ें

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

        }
    }

Question 18

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

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