অ্যাঙ্গুলারজেএস এনজি-স্টপপ্রোপেশন

Question

আমার একটি টেবিল সারিতে ক্লিক ইভেন্ট রয়েছে এবং এই সারিতে একটি ক্লিক ইভেন্ট সহ একটি মোছা বোতামও রয়েছে। আমি যখন মুছুন বোতামটি ক্লিক করি তখন সারিতে থাকা ইভেন্ট ক্লিকটিও সরিয়ে ফেলা হয়।

এখানে আমার কোড।

<tbody>
  <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>{{user.email}}</td>
    <td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td>
  </tr>
</tbody>

আমি showUserযখন টেবিল সেলে থাকা মুছুন বোতামটি ক্লিক করি তখন কীভাবে ইভেন্টটি বরখাস্ত করা যায় আমি তা আটকাতে পারি ?

Answer 1

এনজি ক্লিক ডাইরেক্টিভ (পাশাপাশি সমস্ত ইভেন্টের নির্দেশাবলী) $eventপরিবর্তনশীল তৈরি করে যা একই সুযোগে উপলভ্য। এই পরিবর্তনশীলটি জেএস eventঅবজেক্টের একটি রেফারেন্স এবং কল করতে ব্যবহৃত হতে পারে stopPropagation():

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>
      <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();">
        Delete
      </button>
    </td>              
  </tr>
</table>

PLUNKER

Comments

এটি নিয়ামক কোড - $ স্কোপ $ এ পাওয়া যায় কিনা তা আমি বুঝতে পারি না could ইভেন্টটি কাজ করছে বলে মনে হচ্ছে না। কোন ধারনা?

— ব্যবহারকারী 1338062

@event বস্তুর NG-ক্লিক নির্দেশ ভিতরে তৈরি করা হয়, এবং এটি আপনার উপর এটি পাস আপনার জন্য উপলব্ধ ng-clickহ্যান্ডলার ফাংশন: ng-click="deleteUser(user.id, $event)"।

— স্টিভি

ধন্যবাদ, এক ধরণের এটি

— অনুভূত হয়েছে

আমি মনে করি এটি একাধিক এক্সপ্রেশন প্রকাশের জন্য এটি একটি প্রতিষেধক। কেন $ ইভেন্টটি তৃতীয় যুক্তি হিসাবে ইউজার () এবং তারপরে স্টপপ্রোপেশন ()টিকে সেই ফাংশনের ভিতরে পাস করবেন না?

— jেরু

আমাকেও যুক্ত $event.preventDefault()করতে হয়েছিল, অন্যথায় $event.stopPropagation()বোতামটি ক্লিক করার সময় কলিংটি আমাকে আমার অ্যাপ্লিকেশনের রুটে পুনর্নির্দেশ করছিল।

— ই

Answer 2

স্টিওয়ের উত্তরের একটি সংযোজন। আপনার কলব্যাকটি প্রচার শুরু করা উচিত কিনা সে বিষয়ে সিদ্ধান্ত নেওয়ার ক্ষেত্রে, আমি $eventবস্তুকে কলব্যাকটিতে স্থান দেওয়া দরকারী বলে মনে করেছি :

<div ng-click="parentHandler($event)">
  <div ng-click="childHandler($event)">
  </div>
</div>

এবং তারপরেই কলব্যাকে, আপনি সিদ্ধান্ত নিতে পারেন যে ইভেন্টটির প্রচার বন্ধ করা উচিত:

$scope.childHandler = function ($event) {
  if (wanna_stop_it()) {
    $event.stopPropagation();
  }
  ...
};

Comments

এইচটিএমএল বৈশিষ্ট্যে একাধিক অভিব্যক্তি সম্পাদন করার চেয়ে এটি মার্জিত, ধন্যবাদ

— सन

এইচটিএমএল এনজি-ক্লিক নির্দেশিকায় '$ ইভেন্ট' যুক্তিটি মনে রাখবেন। আমি প্রথমে হোঁচট খেয়েছি।

— থিঙ্কবোনবো

তাত্ক্ষণিক স্টপ আরও ভাল ব্যবহারের জন্য

— এডগার চাভোল্লা

এত সরল, তবুও উপেক্ষিত। আমি বাছাইকৃত উত্তরের দিকে তাকিয়ে ভাবছিলাম "সত্যই? এই কুরুচিপূর্ণ?"। এমনকি এটি একটি পরামিতি হিসাবে পাস করতে বুঝতে পারেনি। সত্যিই সুন্দর.

— tfrascaroli

Answer 3

আমি একটি নির্দেশিকা লিখেছিলাম যা আপনাকে সেই জায়গাগুলি সীমাবদ্ধ করতে দেয় যেখানে ক্লিকের প্রভাব রয়েছে। এটি এর মতো নির্দিষ্ট পরিস্থিতির জন্য ব্যবহার করা যেতে পারে, সুতরাং কেস ভিত্তিতে কোনও মামলার ক্লিকের সাথে মোকাবিলা করার পরিবর্তে আপনি কেবল "ক্লিকে এই উপাদানটি থেকে বেরিয়ে আসতে পারবেন না" বলতে পারেন।

আপনি এটি এর মতো ব্যবহার করবেন:

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td isolate-click>
      <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
      </button>
    </td>              
  </tr>
</table>

মনে রাখবেন যে এটি কেবল বোতামটি নয়, সর্বশেষ কক্ষে সমস্ত ক্লিকগুলি আটকাতে পারে। যদি আপনি যা চান তা না হলে আপনি বোতামটি এইভাবে মোড়াতে চাইতে পারেন:

<span isolate-click>
    <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
    </button>
</span>

নির্দেশিকার কোডটি এখানে:

angular.module('awesome', []).directive('isolateClick', function() {
    return {
        link: function(scope, elem) {
            elem.on('click', function(e){
                e.stopPropagation();
            });
        }
   };
});

Comments

নিস! আমি আপনার নির্দেশিকার নাম পরিবর্তন করে রেখেছি ngClick, কারণ আমি আসলে ইতিমধ্যে পরিচালনা করা কোনও ইভেন্ট প্রচার করতে চাই না।

— maarartinus

সে সম্পর্কে সাবধানতা অবলম্বন করুন। অন্য কিছু প্লাগইন আসলে সেই ক্লিকগুলি শুনতে চাইবে। বাইরে ক্লিক করার সময় আপনি যদি এমন টুলটিপগুলি ব্যবহার করেন তবে সেগুলি কখনই বন্ধ হতে পারে না, কারণ বাইরের ক্লিকগুলি শরীরে প্রচারিত হচ্ছে না।

— জেনস

এটি একটি ভাল বিষয়, তবে এই সমস্যাটি আপনার নির্দেশের সাথেও ঘটবে। হয়তো আমার ঠিক ignoreNgClick=trueইভেন্টটির মতো একটি সম্পত্তি যুক্ত করা উচিত এবং এটি হ্যান্ডেল করা উচিত ... কোনওভাবে। মূলত, মূল ngClickনির্দেশে, তবে এটি পরিবর্তন করা নোংরা বলে মনে হয়।

— মার্টিনাস

হ্যাঁ এটি করে, এজন্যই যদি আমি সত্যিই এটির প্রয়োজন না হয় তবে আমি এই নির্দেশিকাটি ব্যবহার করব না। একবারে এই কারণেই আমাকে ক্লিক প্রচার চালিয়ে যেতে আরও একটি নির্দেশনাও তৈরি করতে হয়েছিল। সুতরাং আমার কাছে একটি বিচ্ছিন্ন-ক্লিক নির্দেশিকা ছিল, তারপরে দম্পতি পিতা-মাতার আমার কাছে আরও একটি ক্লিক-ক্লিকের নির্দেশনা ছিল। এই ভাবে ক্লিকটি শুধুমাত্র মধ্যবর্তী উপাদানগুলির জন্য বাদ দেওয়া হয়েছিল।

— জেনস

Answer 4

আপনি যখন আমার মতো কোনও নির্দেশিকা ব্যবহার করছেন এমন ক্ষেত্রে যখন আপনার যখন কোনও মডেল বা সংগ্রহের কোনও বৈশিষ্ট্য আপডেট করার পরে উদাহরণস্বরূপ দুটি ডাটা ওয়ে বাইন্ডিং দরকার হয় তখন এটি কাজ করে:

angular.module('yourApp').directive('setSurveyInEditionMode', setSurveyInEditionMode)

function setSurveyInEditionMode() {
  return {
    restrict: 'A',
    link: function(scope, element, $attributes) {
      element.on('click', function(event){
        event.stopPropagation();
        // In order to work with stopPropagation and two data way binding
        // if you don't use scope.$apply in my case the model is not updated in the view when I click on the element that has my directive
        scope.$apply(function () {
          scope.mySurvey.inEditionMode = true;
          console.log('inside the directive')
        });
      });
    }
  }
}

এখন, আপনি সহজেই যেকোন বোতাম, লিঙ্ক, ডিভি, ইত্যাদিতে এটি ব্যবহার করতে পারেন:

<button set-survey-in-edition-mode >Edit survey</button>

Answer 5

<ul class="col col-double clearfix">
 <li class="col__item" ng-repeat="location in searchLocations">
   <label>
    <input type="checkbox" ng-click="onLocationSelectionClicked($event)" checklist-model="selectedAuctions.locations" checklist-value="location.code" checklist-change="auctionSelectionChanged()" id="{{location.code}}"> {{location.displayName}}
   </label>



$scope.onLocationSelectionClicked = function($event) {
      if($scope.limitSelectionCountTo &&         $scope.selectedAuctions.locations.length == $scope.limitSelectionCountTo) {
         $event.currentTarget.checked=false;
      }
   };

Comments

আপনি কেন এই প্রশ্নের উত্তরটির কারণ মনে করেন এর কিছু ব্যাখ্যা যুক্ত করবেন?

— পাইসঙ্কো

এটা প্রশ্নের উত্তর দেয়। এটি দেখায় যে ইভেন্টটিতে কীভাবে কলব্যাকে যেতে হবে যা প্রাথমিক প্রশ্নটি বের করেছে তার চেয়ে অনেক বেশি।

— হিউস্টোন