Angular JS: Disable ng-click

Question

Scenario : I am working with Angular js directive. I am working on making elements(i.e all anchor tags and buttons, apart from that, divs which consist ng-click as an attribute) disable. For that, I am using two directives. One for taking all elements which satisfies above mentioned condition and second directive for overriding that element's click event.

Problem : Till now, I got success in getting elements and applying directive dynamically on those elements. After that, I want to disable click event. My Question is, How can I make ng-click null and then once my conditions satisfies I have to execute same ng-click. Note: I am using $compile to compile html of the content. disableElement directive gets all elements and set ng-click attribute as null.But somehow,it is not working.

Goal: Making all element's ng-click disable.

// Disable Element Directive
app.directive('disableElement', ['$timeout','$compile',($timeout,$compile)=> {
return {
    restrict: 'AE',
    priority: 1,
    link: (scope, element, attr)=> {





        $timeout(()=> {
            if (condition satisfies get all elements and apply directive dynamically) {

                var allDivs = angular.element(element).find("*");
                var clickAction;
                for (var i = 0; i < allDivs.length; i++) {
                    var currentElement = allDivs[i];


                    if (currentElement.attributes.length > 0) {
                        for (var j = 0; j < currentElement.attributes.length; j++) {
                            if (currentElement.nodeName == "a" || currentElement.attributes[j].name == "ng-click") {

                                //Gettting click action
                                clickAction = currentElement.getAttribute("ng-click");

                                //making ng-click null  
                                currentElement.setAttribute("ng-click",null);

                                //applying directive dynamically
                                currentElement.setAttribute("ng-demo","");
                                $compile(currentElement)(scope);
                            }
                        }
                    }
                }





            }
    }, 1000);


    }
};
}]);

//ng-demo directive which overrides ng-click
app.directive('ngDemo',function() {
return {
    restrict: 'A',

    link: (scope, element, attr) => {

        var clickAction = attr.ngClick;
        element.bind('click', (e)=> {

            e.preventDefault();

        });


    }
};
});

The way you are trying to solve this, it won't work. You can't disable the ng-click directive itself once it's been compiled. Why don't you check for the condition in the callback function itself ? The implementation will be much more clean and concise. — gkalpak
– gkalpak, Commented Apr 21, 2014 at 9:32
Thank you for reply. @ExpertSystem I am beginner in Angular. So can you please elaborate what are you trying to convey and give me any example which let me solve my issue. — Sohil
– Sohil, Commented Apr 21, 2014 at 9:37
I don't know how your app is set up in order to provide more concrete advice, but it would seem reasonable to do something like: <some-element ng-click="someFunction()"> and inside someFunction(): function someFunction() { if (condition.holds) { return; } else { /* do something */ } } Then you only need to set condition.holds to true and ngClicks will be effectively disabled. — gkalpak
– gkalpak, Commented Apr 21, 2014 at 9:42
Ya,thats true. But in that case, I can only disable those elements which consists ng-click as their attribute but same way I want to disable anchor tags.(As I have checked in directive's conditions for both,elements having ng-click and anchor tags). So, what could be the way for disabling anchor tags and once condition does not satisfy it should be clicked — Sohil
– Sohil, Commented Apr 21, 2014 at 9:49

Raleigh Habersberger · Accepted Answer · 2014-11-13 03:09:36Z

I had a similar problem and here is my solution in a jsfiddle. Basically it invlolves capturing the ngClick events action during compile phase, storing that action elsewhere, nullify ngClick and then in the linking phase setting a click event with the stored action.

Changing the value of the custom directive between true and false will show results

http://jsfiddle.net/raleighvon/10wc2co6/5/

HMTL

<div ng-click="originalAction()" rv-deny-access="false" ng-controller="MyCtrl">
  click me
</div>

JS

//Captures ngClick and lets it pass through if directive value is false
var myApp = angular.module('myApp',[]);

myApp.directive('rvDenyAccess', function($parse) {
return {
  restrict: 'A',
  compile: function(elem, attrs) {
      var capturedOriginalAction = attrs.ngClick;
      attrs.ngClick = null;
      elem.removeAttr('ng-click');
      return function(scope, elem, attrs) {
        var value = scope.$eval(attrs.rvDenyAccess);
          if(value) { 
              // Can make a new action happen or prevent original action
              elem.bind('click', function(e) {
                  alert('Access denied!');
              });
          } else {
              elem.bind('click', function(e) {
                  $parse(capturedOriginalAction)(scope)
              });                
          }
      };
  }
};

});

function MyCtrl($scope) {
    $scope.originalAction = function() {
    alert('Access granted!');
   };
}

Collectives™ on Stack Overflow

Angular JS: Disable ng-click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related