2

I'm trying to build an editable table cell however there are some conditions that determine whether it is editable or not so I can't just include an input in the template. My goal is to have the cell create an input using the same model that the cell has but it doesn't seem to work.

HTML:

<td editable-grid-cell ng-model="batch.amount" name="amount"></td>

Directive Code:

.directive('editableGridCell', function($compile) {
    return {
        link: function(scope, ele, attrs) {
            scope.field = attrs.ngModel;
            ele.append($compile('<input type="text" class="form-control" ng-model="field"/>')(scope));
        }
    }
})

Doing this results in the input being populated with 'batch.amount'. I've gotten this to work by using an isolated scope:

scope: {
  model: '=ngModel'
}
...
ele.append($compile('<input type="text" class="form-control" ng-model="model"/>')(scope));

However, I need access to the parent scope because I have all my table options set in the controller so I think isolated scope won't work here.

Thanks for the help!

kvedananda
  • 313
  • 1
  • 3
  • 9
  • You can access the model value by requiring ngModel and accessing the $modelValue property of its controller... http://stackoverflow.com/questions/20930592/whats-the-meaning-of-require-ngmodel – Anthony Chu Jul 20 '14 at 00:08

1 Answers1

2

you can pass all the table options to you editable grid cell directive through scope

scope: {
  model: '=ngModel',
  tableOptions: '='
}

or if you dont want to use isolate scope then, you can create your html using attrs

.directive('editableGridCell', function($compile) {
    return {
        link: function(scope, ele, attrs) {
           var html = '<input type="text" class="form-control" ng-model="';
           html += attrs.ngModel;
           html += '"/>';
            ele.append($compile(html)(scope));
        }
    }
})
harishr
  • 17,807
  • 9
  • 78
  • 125
  • Took me a while but I eventually reached both of these solutions. Ended up using an isolated scope and added tableOptions attr to my cell tag. I also tried something similar to your proposed second solution. Looks like the problem was trying to pass a variable into the compile method. Had to do like you did and get the tag just right before the compile. Thanks! – kvedananda Jul 21 '14 at 01:35
  • Is there a solution for AngularJs 1.6.3? If I follow your second approach, the Html ends up something like `` and throws the error `Expression '' is not assignable.` – scipper Jan 15 '18 at 08:55