This directive sets the disabled
attribute on the element if the
expression inside ngDisabled
evaluates to truthy.
A special directive is necessary because we cannot use interpolation inside the disabled
attribute. The following example would make the button enabled on Chrome/Firefox
but not on older IEs:
<!-- See below for an example of ng-disabled being used correctly -->
<div ng-init="isDisabled = false">
<button disabled="{{isDisabled}}">Disabled</button>
</div>
This is because the HTML specification does not require browsers to preserve the values of
boolean attributes such as disabled
(Their presence means true and their absence means false.)
If we put an Angular interpolation expression into such an attribute then the
binding information would be lost when the browser removes the attribute.
<INPUT
ng-disabled="expression">
...
</INPUT>
Param | Type | Details |
---|---|---|
ngDisabled | expression |
If the expression is truthy,
then the |
<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
<button ng-model="button" ng-disabled="checked">Button</button>
it('should toggle button', function() {
expect(element(by.css('button')).getAttribute('disabled')).toBeFalsy();
element(by.model('checked')).click();
expect(element(by.css('button')).getAttribute('disabled')).toBeTruthy();
});