In angularjs we are having ng-disabled directive, why ng-enabled directive is not provided by the framework as we are having ng-show and ng-hide

JavascriptAngularjs

Javascript Problem Overview


In AngularJs ng-enabled directive is not provided. Is there any proper reason to not providing that directive in the framework, because we are having both ng-show and ng-hide when you can just use ng-hide to achieve our goal.

It wouldn't be nice just to check ng-enabled="attribute.value === true"

instead of ng-disabled="!(attribute.value === true)"

it will increase the readability of the code.

Javascript Solutions


Solution 1 - Javascript

The reason why there is no ngEnabled directive in Angular is rather semantical - there is simply nothing corresponding to it in HTML specification. At the same time there is already ngDisabled directive that works with disabled attribute. For the same reason, there is no ngUnchecked directive, because there is already ngChecked that sets/removes checked attribute.

Now, the reasonable question: why we have both ngShow and ngHide then? Well it's just for convenience in this case I guess, because having both ngShow and ngHide is not more confusing than ngShow alone, but at the same time it's very handy to have both.

Solution 2 - Javascript

I am not missing an ng-enabled directive at all and I think it would add little to nothing to the framework.

Inputs are enabled by default and HTML inputs also do not have an enabled attribute, just a disabled. The angular directive sets the HTML disabled attribute, but after evaluating an expression.

You can just write

> ng-disabled="!attribute.value"

I think it is pretty readable.

Solution 3 - Javascript

TLDR: Use [angular-enabled][1] instead.

The core team expressed their view in this this comment: https://github.com/angular/angular.js/issues/1252#issuecomment-49261373

They will not abide a feature request just because it has many +1-s in order to keep the core bloat free.

However, if you still want to have ng-enabled functionality, btford has created this handy little module just for you: https://github.com/btford/angular-enabled

[1]: https://github.com/btford/angular-enabled "this"

Solution 4 - Javascript

Angular sets the disabled attribute based on the result of the expression in ng-disabled. There is no enabled attribute in HTML5 so ng-Enabled wouldn't work.

Solution 5 - Javascript

This line worked for me.

ng-disabled="!attribute.value"

Solution 6 - Javascript

Not that this is an answer to the question of Why but for those who want to write their own directive, here you go. BTW it's in coffeescript.

.directive 'ngEnabled', [
    '$parse'
    ($parse)->
    
      dir =
        restrict: 'AC'
        link: ($scope, elem, attrs)->
          getter = $parse attrs.ngEnabled
          
          $off = $scope.$watch ->
            getter $scope
          , (val)->
            elem.attr 'disabled', !val
            
          $scope.$on '$destroy', -> $off()
  ]

http://plnkr.co/edit/F4RG2v859oFtTumvgoGN?p=preview

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAvinash SolankiView Question on Stackoverflow
Solution 1 - JavascriptdfsqView Answer on Stackoverflow
Solution 2 - JavascriptrmullerView Answer on Stackoverflow
Solution 3 - JavascriptDavid SalamonView Answer on Stackoverflow
Solution 4 - JavascriptadamjldView Answer on Stackoverflow
Solution 5 - JavascriptSourav GhadaiView Answer on Stackoverflow
Solution 6 - JavascriptjusopiView Answer on Stackoverflow