[ How to use jquery columnize with angularJs ]

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?

Answer 1

.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