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




angularjs-directive angularjs-scope (11)

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

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

आदेश

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


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

अद्यतन: पुराना उत्तर (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 , तो यह ठीक काम करता है। आप इसे किसी अन्य चीज़ का नाम बदल सकते हैं और अभी भी विशेषता को पढ़ सकते हैं, जबकि क्लिक हैंडलर से दो बार समस्या उत्पन्न हो रही है, इस समय वहां समस्या है।

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

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


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

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


एचटीएमएल 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();
       });
     }
    };
});

कोणीय वादे $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 सामग्री का उपयोग करके कार्यान्वित किया जा सकता है:

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

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


मेरी इच्छा है कि 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://github.com/Schlogen/angular-confirm


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

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

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

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







angularjs-scope