Ways to prevent clicking on ng-repeat rows?

Question

Ways to prevent clicking on ng-repeat rows?

Is it possible to prevent clicking on ng-repeat rows? How can I achieve this?

Below is a sample code snippet:

<div ng-controller="MyCtrl" class="grid">
  <div class="header">
    <div class="cell">Id</div>
    <div class="cell">Name</div>
  </div>
  <div class="gridBody">
    <div ng-class-even="'even'"
         ng-class-odd="'odd'"
         ng-class="{current: row.current == true}"
         ng-click="clicked(row)"
         ng-repeat="row in topics" class="row"
         ng-disabled="disabled == true">
      <div class="cell">{{row.id}}</div>
      <div class="cell">{{row.name}}</div>
      <div class="cell">{{row.current}}</div>
    </div>
  </div>
</div>

A jsfiddle has also been created to demonstrate the issue at hand.

Updates:

The jsfiddle link has been modified to provide more clarity on the problem I am facing. Hopefully, it helps in understanding my challenge better.

http://jsfiddle.net/2jxea6qw/8/

javascript angularjs

Answer 1

Answer №1

To achieve this functionality, create a custom directive and trigger an event capture.

Implement the subscription to the $element during the link phase of your ClickDisablerDirective in the following manner:

$element.addEventListener("click", function(e) {
   e.stopPropagation()
   e.preventDefault()
}, true)

Note that the 'true' parameter is crucial as it ensures the handler receives notification before any other lower level (bubbling wise) handlers.

Below is the complete directive implementation:

myApp.directive('disableClick', [function() {
 return {
    restrict:'A',
    link: function(scope, element) {
      element[0].addEventListener("click", function(e) {
        e.stopPropagation()
        e.preventDefault()
      }, true)
    }
 }
}])

I have updated the fiddle to demonstrate how it works: http://jsfiddle.net/2jxea6qw/6/

Answer 2

To achieve this functionality, create a custom directive and trigger an event capture.

Implement the subscription to the $element during the link phase of your ClickDisablerDirective in the following manner:

$element.addEventListener("click", function(e) {
   e.stopPropagation()
   e.preventDefault()
}, true)

Note that the 'true' parameter is crucial as it ensures the handler receives notification before any other lower level (bubbling wise) handlers.

Below is the complete directive implementation:

myApp.directive('disableClick', [function() {
 return {
    restrict:'A',
    link: function(scope, element) {
      element[0].addEventListener("click", function(e) {
        e.stopPropagation()
        e.preventDefault()
      }, true)
    }
 }
}])

I have updated the fiddle to demonstrate how it works: http://jsfiddle.net/2jxea6qw/6/

Ways to prevent clicking on ng-repeat rows?

Answer №1

Similar questions

Automatically filling in related information in multiple input fields after choosing a value in a specific input field using JavaScript

Best Strategies for Dashboard Development using Angular JS

Issues with the functionality of the AngularJS button directive

What could possibly be causing the issue of $injector not being defined?

Angular4 - prevent form submission when input is empty or value is less than 1

What is a Creative Name for a Javascript Array?

Are there any SVG libraries available that can create line graphs similar to those seen in Google Analytics?

Secure access with Express/Node.js in the mobile app powered by Appgyver Supersonic

What is the reason behind $(this).text() returning an empty string when clicking on an li element?

Ways to gradually adjust the height of a Div element

Identifying a button element with AngularJS in a Selenium test suite

Error message in Angular about undefined JavaScript function

Why is the PageLoad event triggering repeatedly because of the idletimeout plugin?

Find similarities between 2 observable arrays and store them in a new array using knockout data binding

Guide on setting up a new NPM and JavaScript project within Visual Studio 2015

The error "marker.setMap not a function" was not caught in the Google Maps API

Running a JavaScript script after loading a page via AJAX is not functioning as expected

Tips for running a dry default with Angular CLI

JavaScript date selector allowing the selection of multiple dates

What is the best way to retrieve this value using javascript?