এনজি-ক্লিকের উপর নিশ্চিতকরণ ডায়ালগ - AngularJS

Question 1

আমি 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= পূর্বরূপ

Question 2

আপনি যদি ব্যবহার না করতে আপত্তি করেন না ng-click, এটি ঠিক আছে। এই মুহুর্তে দু'বার সমস্যা দেখা দেওয়ার কারণে ক্লিক হ্যান্ডলারটিকে এড়িয়ে চলার পরে আপনি এটিকে অন্য কোনওটির নাম পরিবর্তন করতে পারেন এবং তবুও এট্রিবিউটটি পড়তে পারেন।

http://plnkr.co/edit/YWr6o2?p= পূর্বরূপ

আমি মনে করি যে সমস্যাটি 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-cl/

আপডেট: নতুন উত্তর (২০১))

1) 'এনজি' থেকে 'এমডাব্লু' তে পরিবর্তিত উপসর্গটি পূর্ববর্তী ('এনজি') স্থানীয় কৌণিক নির্দেশের জন্য সংরক্ষিত।

2) এনজি-ক্লিক ইভেন্টটিকে বাধা দেওয়ার পরিবর্তে কোনও ফাংশন এবং বার্তা পাস করার নির্দেশিকা পরিবর্তিত।

3) যোগ করা ডিফল্ট "আপনি কি নিশ্চিত?" এই ক্ষেত্রে বার্তাটি যে কোনও কাস্টম বার্তা এমডব্লু-কনফার্ম-ক্লিক-ম্যাসেজ = "" সরবরাহ করা হয় না।

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

আরও তথ্যের জন্য, দেখুন: ion আয়নিকপপআপ

Question 5

এটি কোর জাভাস্ক্রিপ্ট + কৌণিক জেএস ব্যবহার করে এতটাই সহজ:

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

আপনি যদি ওকে ক্লিক করেন তবে মুছুন অপারেশনটি নেওয়া হবে, অন্যথায় না not * আইডি হ'ল প্যারামিটার, রেকর্ড যা আপনি মুছতে চান।

Question 6

terminal: falseবোতামটির অভ্যন্তরে প্রসেসিংয়ে বাধা দিচ্ছে তাই আপনি ব্যবহার করতে চান না । পরিবর্তে, আপনার linkসাফ attr.ngClickমধ্যে ডিফল্ট আচরণ রোধ করতে।

http://plnkr.co/edit/EySy8wpeQ02UHGPBAIvg?p= পূর্বরূপ

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

আমি এই জিনিসটির জন্য একটি মডিউল তৈরি করেছি যা কৌণিক- UI $ মডেল পরিষেবাটিতে নির্ভর করে।

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

এইচটিএমএল:

<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

এইচটিএমএল 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 উপাদান :

d এমডিডায়ালগ ব্যবহারকারীদের সমালোচনামূলক তথ্য সম্পর্কে অবহিত করতে বা তাদের সিদ্ধান্ত গ্রহণের প্রয়োজনের জন্য অ্যাপের মাধ্যমে একটি ডায়ালগ খোলে। সেটআপের জন্য দুটি পন্থা রয়েছে: একটি সাধারণ প্রতিশ্রুতি API এবং নিয়মিত অবজেক্ট সিনট্যাক্স।

বাস্তবায়নের উদাহরণ: কৌণিক উপাদান - ডায়ালগ

Question 13

আপনি যদি ইউআই-রাউটার ব্যবহার করেন তবে বাতিল বা গ্রহণ বোতামটি ইউআরএল প্রতিস্থাপন করে। এটি প্রতিরোধ করতে আপনি শর্তাধীন বাক্যটির প্রতিটি ক্ষেত্রে মিথ্যা ফিরতে পারেন:

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 তীর ফাংশন ব্যবহার করছি তবে এটি প্লেন ওল 'ES5 এও কাজ করছে।

Question 16

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>

জেএস

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% কাজ নিশ্চিত করুন

এইচটিএমএল ফাইল কল ডিলিট_প্লিট () ফাংশনে

<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

আমি আশা করি AngularJS এর একটি কনফার্মেশন ডায়ালগ অন্তর্নিহিত ছিল। প্রায়শই, অন্তর্নির্মিত ব্রাউজারটি ব্যবহার করার চেয়ে কাস্টমাইজড ডায়ালগ রাখা ভাল।

আমি সংক্ষিপ্তভাবে টুইটার বুটস্ট্র্যাপটি 6 সংস্করণটি বন্ধ না হওয়া অবধি ব্যবহার করেছি I আমি 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;
            }
        }
    });

আমি আশা করি এটা কারো সাহায্যে লাগবে. আমি যখন ইউআই-বুটস্ট্র্যাপ-টিপিএলএস.জেএস আপগ্রেড করার দরকার পড়েছিলাম তখন আমার চুলগুলি টানছিল তবে এটি আমার বিদ্যমান সংলাপটি ভেঙে দিয়েছে। আমি আজ সকালে কাজে এসেছি, কয়েকটি জিনিস চেষ্টা করেছি এবং তারপরে বুঝতে পেরেছিলাম যে আমি জটিল হয়ে পড়েছি।