One of the challenges I faced was creating a directive that disables inputs on boxes unless they are double-clicked as "active". Despite my efforts, AngularJS still passed disabled inputs to a scope function.
Simplistic input HTML:
<div class="selectable-boxes" toggle-inputs>
<div class="box selected">
<div class="form-container">
<div class="form-group">
<input type="text" placeholder="First" name="f1" data-ng-model="fields.information.f1"></div>
...
All labeled as f1, f2, f3..
Custom Directive:
app.directive( 'toggleInputs', function() {
return {
link: function(Scope, element, attrs) {
var $element = element;
$element.find('.box').bind('dblclick', function () {
$element.find('.box').removeClass('selected');
$(this).addClass('selected');
toggleInputDisabled();
});
function toggleInputDisabled() {
$element.find('.box').each(function () {
$(this).find(':input').attr('disabled', !$(this).hasClass('selected')).attr('data-ng-disabled', 'isDisabled');
});
}
toggleInputDisabled();
}
};
});
The directive does its job by disabling fields and adding ng-disabled="'isDisabled' with $scope.isDisabled = true;. Yet, these values persist in being included in a $scope function. Why is this happening?
Object {f1: "1", f2: "2", f3: "3", f10: "4", f11: "5"…}