How to create a directive for disable all elements into div element
Solution 1
You can create a directive that alters its content during compile time by adding the condition. Something along these lines (untested):
module.directive('contentsDisabled', function() {
return {
compile: function(tElem, tAttrs) {
var inputs = tElem.find('input');
inputs.attr('ng-disabled', tAttrs['contentsDisabled']);
}
};
});
See a JSFiddle here: http://jsfiddle.net/HB7LU/6380/
This has the drawback that you just copy the expression from contents-disabled
into ng-disabled
attributes of any inputs - if somebody uses a directive that in turn creates <input>
elements, you won't pick them up.
It'd be less fragile to get hold of the FormController
instance and iterate through all its controls, but sadly AngularJS doesn't expose the controls in a form. Maybe file a feature request?
Solution 2
You also can use a tag fieldset :
<form>
<fieldset ng-disable="foo">
<input name="the_one"/>
<input name="the_second"/>
</fieldset>
<input name="the_thrid"/>
</form>
With this way, when the variable foo is TRUE, inputs "the_one" and "the_second" will be disabled.
![Football-Is-My-Life](https://i.stack.imgur.com/DUBQg.jpg?s=256&g=1)
Football-Is-My-Life
Updated on June 05, 2022Comments
-
Football-Is-My-Life about 2 years
how to create a directive for disable all elements into div element ?
something like this :
<div div-disabled div-disabled-condition="state=='Stack'||state=='Over'||state=='Flow'"> <input type="text"/> <input type="url"/> <div> <input type="text"/> <input type="url"/> </div> <div>
Is it possible? I have no idea .
angular .module('uiRouterApp.ctrl.add', ['uiRouterApp.ctrl.customDirective']) .controller('addCtrl', [ '$scope', '$location', '$stateParams', '$state', function ($scope, $location, $stateParams, $state) { $scope.state = {}; } ]).directive('divDisabled', function () { return { scope: { divDisabledCondition: '@' }, link: function (scope, element, attrs) { } }; });
Update :
please see this :
<div class="col-sm-12 ng-isolate-scope" selected-object="SelectedAutoComplete" local-data="requirements.Item1" search-fields="NameFa,NameEn" title-field="NameFa" minlength="2" field-required="true" image-field="ImageUrl" disable-auto-compelete="response.State=='Success'||response.State=='Error'||response.State=='Warning'"> <div class="angucomplete-holder"> <input id="_value" ng-model="searchStr" type="text" placeholder="select" class="form-control ng-dirty" ng-focus="resetHideResults()" ng-blur="hideResults()" autocapitalize="off" autocorrect="off" autocomplete="off" ng-change="inputChangeHandler(searchStr)" ng-disabled="response.State=='Success'||response.State=='Error'||response.State=='Warning'" style=""> <!-- ngIf: showDropdown --> </div> </div>
directive :
.directive('contentsDisabled', function() { return { compile: function(tElem, tAttrs) { var inputs = tElem.find('input'); for (var i = 0; i < inputs.length; i++) { inputs.attr('ng-disabled', tAttrs['disableAutoCompelete']); } } } })
why When the
state
is 'Success' or 'Error' or 'Warning' Input not disabled ?