Rcls Rcls - 6 months ago 22
AngularJS Question

AngularJS ignores disabled on post

I created a directive to set inputs disabled on boxes which aren't double clicked as "active". I have a problem where AngularJS still passes those inputs which have been disabled to a scope function.

Basic 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 named f1, f2, f3..

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 works fine. It disables fields and adds ng-disabled="'isDisabled' and I've set
$scope.isDisabled = true;
. However, these values still get passed forward on a $scope function. Why?

Object {f1: "1", f2: "2", f3: "3", f10: "4", f11: "5"…}

Answer

Well I came up with a solution to go around this particular problem. The issue seems to be with ng-model as suggested in above comments and that it creates a binding that's hard to actually remove and I need that binding to actually use ng-click="function(fields)".

So I went and created a directive which then manipulates scope to add another 'replaced' parameter to the object tree that I'm using. I then check if that exists and use those new values, but there was another issue with this.

I had to use setTimeout(function() { }, 100); inside the controller function to actually find these new values, because they could not be found otherwise.

app.directive( 'buttonClick', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function() {
          scope.fields.information.replaced = {};

          var i = 0;

          $('.selectable-boxes .box.selected input').each(function() {
                scope.fields.information.replaced['f' + i] = $(this).val();
                i++;
          });

          scope.$apply();
      });
    }
  };
});
Comments