Dynamic ranges

[teh-skrud]

Basically, I would like to be able to add rows dynamically that have a custom html template, i.e. I would like to create a ngc-range whose bottom boundary evolves in time.

The problem is that the range is registered once (addParent function in ngcRange directive) and any subsequent modification to the range is ignored.

I think I'm left with two options :

1. Create a new range for each new row (maybe that would work with ng-repeat or something)
2. Modify the library to store the ranges in a way that updating them is possible.

Any advise on that ?

[selvach]

I worked around this by relinking the entire table - essentially, dropping it from the DOM and re-adding it. It's a bit of short cut....

Wrap your ngc-table in a div with the relink-event directive:

<div relink-event="redrawTable">
  <ngc-table ......>
        ....
        <ngc-range top="0" bottom="rowCount" left="0" right="colCount" click-fn="clickFn"></ngc-range>
        ....
  </ngc-table>
</div>

When something changes, e.g. a new row is added, call $rootScope.$broadcast("redrawTable"); after you've updated your $scope variables with the relevant row / column counts.

Here's the relink-event directive:

        .directive('relinkEvent', ['$rootScope', function ($rootScope) {
            return {
                transclude: 'element',
                restrict: 'A',
                link: function (scope, element, attr, ctrl, transclude) {
                    var previousContent = null;

                    var triggerRelink = function () {
                        if (previousContent) {
                            previousContent.remove();
                            previousContent = null;
                        }

                        transclude(function (clone) {
                            element.parent().append(clone);
                            previousContent = clone;
                        });

                    };

                    triggerRelink();
                    $rootScope.$on(attr.relinkEvent, triggerRelink);

                }
            };
        }]);

[teh-skrud]

Thanks for the suggestion. I've never actually used the transclude function before.

I've ended up doing this too (much less clean that your code), which was more or less what I considered option 1. I guess there is no other way around as the directive assumes all dimensions are fixed, so it kind of makes sense to have fixed ranges too.

[DeezCashews]

Thanks Selvach! I had a form above my table allowing it to filter out data which changed size of rows or columns. I was having to reload entire page $state.$transitionTo($state.current.name.... passing the filter params until I saw this. Much cleaner.