javascript AngularJS एनजी-क्लिक स्टॉपप्रॉपैगेशन




angularjs-ng-click (5)

ngClick निर्देश (साथ ही साथ अन्य सभी ईवेंट निर्देश) $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

https://code.i-harness.com

मेरे पास एक टेबल पंक्ति पर एक क्लिक इवेंट है और इस पंक्ति में एक क्लिक इवेंट के साथ एक डिलीट बटन भी है। जब मैं डिलीट बटन पर क्लिक करता हूं तो पंक्ति पर ईवेंट भी निकाल दिया जाता है।

मेरा कोड यहाँ है।

<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 तो showUser इवेंट को निकाल दिया जा सकता है?


मैंने एक निर्देश लिखा है जो आपको उन क्षेत्रों को सीमित करने देता है जहां क्लिक पर असर पड़ता है। इसका उपयोग इस तरह के कुछ परिदृश्यों के लिए किया जा सकता है, इसलिए मामले के आधार पर किसी मामले पर क्लिक से निपटने के बजाय आप केवल "इस तत्व से क्लिक नहीं आएंगे" कह सकते हैं।

आप इसका इस्तेमाल इस तरह करेंगे:

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

यदि आप मेरे जैसे निर्देश का उपयोग कर रहे हैं, तो यह किसी भी मॉडल या संग्रह में किसी विशेषता को अपडेट करने के बाद उदाहरण के लिए बाध्यकारी दो डेटा तरीके की आवश्यकता होने पर यह काम करता है:

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

अब, आप आसानी से किसी भी बटन, लिंक, div, आदि में इसका उपयोग कर सकते हैं:

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

स्टीवी के जवाब में एक जोड़ा। यदि आपका कॉलबैक निर्णय लेता है कि प्रचार रोकना चाहिए या नहीं, तो मुझे कॉलबैक में $event ऑब्जेक्ट पास करने में उपयोगी लगता है:

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

और फिर कॉलबैक में, आप तय कर सकते हैं कि घटना का प्रचार बंद होना चाहिए या नहीं:

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

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







angularjs-ng-click