1

I want to use the columnize plugin from jquery to set up columns in my AngularJS app. My super naive approach was:

.directive('columnize', function() {
    return {
        restrict: 'A',
        link: function(scope, iElement, iAttrs) {
            $(iElement).columnize({columns: 2});
        }
    };
});

With this HTML code:

<ol class="questions" columnize>
    <li ng-repeat="question in questions" class="question">
        <span>{{question.text}}</span>
        <ul class="choices" sortable="question.choices">
            <li ng-repeat="choice in question.choices">
                {{choice}}
            </li>
        </ul>
    </li>
</ol>

The problem though is that inside the element I use ng-repeat. columnize destroy's the dom and then ng-repeat throws an exception that it can't insertBefore null elements. I feel like my approach is just wrong. Any suggestions?

Sandro
  • 2,219
  • 4
  • 27
  • 41
  • The link to jquery columnize is broken. Also, in your html code, you are not using columnize directive anywhere. – Tosh Nov 14 '12 at 05:54
  • @sandro Try adding the `terminal: true` property to the directive config. And as **tosh shimayama** correctly pointed, you should declare the usage of your `columnize` directive on the `
      ...
    `.     – John Doe Nov 14 '12 at 09:50
  • @toshshimayama Sorry about the poorly formatted questions! That should be fixed now. I tried adding 'terminal: true' but that only prevented the directive executing entirely! (No errors were thrown, but it looks like the ng-repeat never executed.) – Sandro Nov 15 '12 at 03:09

1 Answers1

0
.directive('columnize', function($timeout) {
   return {
     restrict: 'A',
     link: function(scope, iElement, iAttrs) {
              $timeout( function(){ iElement.columnize({columns: 2}), 0});
           }

Although this seems to work, I don't think this is the correct way to do it. I remembered reading another post where $timeout was used to run a function after the initial render, and that seems to work here.

Hopefully you'll get a better answer.

Fiddle

Community
  • 1
  • 1
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
  • 1
    Ah this brings me much closer! So yes this causes it render correctly. The problem though is that when the model updates and the number of elements in the ol changes it crashes again with the same error from before the use $timeout... – Sandro Nov 15 '12 at 03:07