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
JavascriptAngularjsJavascript 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()
]