Enable Disable Anchor Tags using AngularJS

Question

How do I enable disable anchor tags using the directive approach    Example     while clicking on edit link  create  amp  delete needs to be disabled or grayed out while clicking on create link  edit  amp  delete needs to be disabled or grayed out   JAVASCRIPT       angular module  ngApp       controller  ngCtrl     scope   function  scope         scope create   function          console log  inside create                 scope edit   function          console log  inside edit                 scope delete   function        console log  inside delete                    directive  a   function            return               restrict   E               link  function scope  elem  attrs                    if attrs ngClick    attrs href           attrs href                               elem on  click   function e                           e preventDefault                            if attrs ngClick                               scope  eval attrs ngClick                                                                                                          LINK to CODE

User · Answer

Make a toggle function in the respective scope to grey out the link   First create the following CSS classes in your  css file    disabled       pointer-events  none      cursor  default      enabled       pointer-events  visible      cursor  auto      Add a  scope state and  scope toggle variable  Edit your controller in the JS file like        scope state  on        scope toggle  enabled        scope changeState   function                       scope state    scope state      on     off     on                    scope toggleEdit                        scope toggleEdit   function                  if   scope state      on                    scope toggle    enabled               else                  scope toggle    disabled                Now in the HTML a tags edit as    lt a href     ng-click  create    class    toggle    gt CREATE lt  a gt  lt br  gt   lt a href     ng-click  edit    class    toggle    gt EDIT lt  a gt  lt br  gt   lt a href     ng-click  delete    class    toggle    gt DELETE lt  a gt    To avoid the problem of the link disabling itself  change the DOM CSS class at the end of the function   document getElementById  create   className    enabled

User · Answer

For people not wanting a complicated answer  I used Ng-If to solve this for something similar    lt div style  text-align  center   gt    lt a ng-if  ctrl something    null  href     ng-click  ctrl anchorClicked     gt I m An Anchor lt  a gt    lt span ng-if  ctrl something    null  gt I m just text lt  span gt   lt  div gt

User · Answer

Disclaimer   The OP has made this comment on another answer      We can have ngDisabled for buttons or input tags  by using CSS we can   make the button to look like anchor tag but that doesn t help much  I   was more keen on looking how it can be done using directive approach   or angular way of doing it      You can use a variable inside the scope of your controller to disable the links buttons according to the last button link that you ve clicked on by using ng-click to set the variable at the correct value and ng-disabled to disable the button when needed according to the value in the variable   I ve updated your Plunker to give you an idea   But basically  it s something like this     lt div gt          lt button ng-click  create    ng-disabled  state      edit   gt CREATE lt  button gt  lt br  gt          lt button ng-click  edit    ng-disabled  state      create   gt EDIT lt  button gt  lt br  gt          lt button href    ng-click  delete    ng-disabled  state      create     state      edit   gt DELETE lt  button gt       lt  div gt

User · Answer

ui-router v1 0 18 introduces support for ng-disabled on anchor tags  Example   lt a ui-sref  go  ng-disabled  true  gt nogo lt  a gt    https   github com angular-ui ui-router issues 2957 https   github com angular-ui ui-router pull 3692 commits a59fcae300f9d8f73a5b91fa77c92b926e68281d

User · Answer

My problem was slightly different  I have anchor tags that define an href  and I want to use ng-disabled to prevent the link from going anywhere when clicked  The solution is to un-set the href when the link is disabled  like this    lt a ng-href    isDisabled           foo        ng-disabled  isDisabled  gt Foo lt  a gt    In this case  ng-disabled is only used for styling the element   If you want to avoid using unofficial attributes  you ll need to style it yourself    lt style gt  a disabled       color   888     lt  style gt   lt a ng-href    isDisabled           foo        ng-class   disabled  isDisabled   gt Foo lt  a gt

User · Answer

You can create a custom directive that is somehow similar to ng-disabled and disable a specific set of elements by    watching the property changes of the custom directive  e g  my-disabled  clone the current element without the added event handlers  add css properties to the cloned element and other attributes or event handlers that will provide the disabled state of an element  when changes are detected on the watched property  replace the current element with the cloned element    HTML      lt a my-disabled  disableCreate  href     ng-click  disableEdit   true  gt CREATE lt  a gt  lt br  gt      lt a my-disabled  disableEdit  href     ng-click  disableCreate   true  gt EDIT lt  a gt  lt br  gt      lt a my-disabled  disableCreate    disableEdit  href     gt DELETE lt  a gt  lt br  gt      lt a href     ng-click  disableEdit   false  disableCreate   false   gt RESET lt  a gt    JAVASCRIPT  directive  myDisabled   function       return        link  function scope  elem  attr          var color   elem css  color              textDecoration   elem css  text-decoration              cursor   elem css  cursor                 double negation for non-boolean attributes e g  undefined           currentValue     scope  eval attr myDisabled              current   elem 0             next   elem 0  cloneNode true          var nextElem   angular element next          nextElem on  click   function e            e preventDefault            e stopPropagation                     nextElem css  color    gray          nextElem css  text-decoration    line-through          nextElem css  cursor    not-allowed          nextElem attr  tabindex   -1          scope  watch attr myDisabled  function value               double negation for non-boolean attributes e g  undefined         value     value           if currentValue    value              currentValue   value            current parentNode replaceChild next  current             var temp   current            current   next            next   temp

User · Answer

Modifying  Nitin s answer to work with dynamic disabling   angular module  myApp   directive  a   function       return       restrict   E       link  function scope  elem  attrs          elem on  click   function e            if  attrs disabled              e preventDefault       prevent link click                                      This checks the existence of disabled attribute and its value upon every click

User · Answer

Have you tried using lazy evaluation of expressions like disabled    someAction     Lets assume I defined something like so in my controller    scope disabled   true    Then I can disabling a link and apply inline styles like so    lt a data-ng-click  disabled     GoTo    employer      data-ng-style  disabled  amp  amp     background-color    rgba 99  99  99  0 5       gt Higher Level lt  a gt    Or better still disable a link and apply a class like so    lt a data-ng-click  disabled     GoTo    employer      data-ng-class    disabled  disabled    gt Higher Level lt  a gt    Note  that you will have a class  disabled  applied to DOM element by that statement   At this stage you just need to handle what you action GoTo   will do  In my case its as simple as redirect to associated state    scope GoTo   function  state        if  state    undefined  amp  amp  state length  gt  0             window location hash   state             Rather than being limited by ngDisabled you are limited by what you decide to do   With this technique I successfully applied permission level checking to enable or disable user access to certain part of my module   Simple plunker to demonstrate the point

User · Answer

Update  Disabling the href works better in the link function return  Code below has been updated   aDisabled naturally executes before ngClick because directives are sorted in alphabetical order  When aDisabled is renamed to tagDisabled  the directive does not work     To  disable  the  a  tag  I d want the following things    href links not to be followed when clicked ngClick events not to fire when clicked styles changed by adding a disabled class   This directive does this by mimicking the ngDisabled directive  Based on the value of a-disabled directive  all of the above features are toggled   myApp directive  aDisabled   function         return           compile  function tElement  tAttrs  transclude                  Disable ngClick             tAttrs  ngClick          tAttrs  aDisabled       amp  amp     tAttrs  ngClick                       return a link function             return function  scope  iElement  iAttrs                       Toggle  disabled  to class when aDisabled becomes true                 scope  watch iAttrs  aDisabled    function newValue                        if  newValue     undefined                            iElement toggleClass  disabled   newValue                                                                Disable href on click                 iElement on  click   function e                        if  scope  eval iAttrs  aDisabled                               e preventDefault                                                                                    Here is a css style that might indicate a disabled tag   a disabled       color   AAAAAA      cursor  default      pointer-events  none      text-decoration  none      And here is the code in action  with your example

User · Answer

You may  redefine the a tag using angular directive   angular module  myApp   directive  a   function       return       restrict   E       link  function scope  elem  attrs          if   disabled  in attrs            elem on  click   function e              e preventDefault       prevent link click                                      In html    lt a href  nextPage  disabled gt Next lt  a gt

User · Answer

I d expect anchor tags to lead to a static page with a url  I think that a buttons suits more to your use case  and then you can use ngDisabled to disable it  From the docs  https   docs angularjs org api ng directive ngDisabled

[angularjs] Enable/Disable Anchor Tags using AngularJS

Examples related to angularjs

Examples related to angularjs-directive