How to use jquery columnize with angularJs

Question

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?

The link to jquery columnize is broken. Also, in your html code, you are not using columnize directive anywhere. — Tosh
– Tosh, Commented Nov 14, 2012 at 5: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 <ol columnize>...</ol>. — John Doe
– John Doe, Commented Nov 14, 2012 at 9: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
– Sandro, Commented Nov 15, 2012 at 3:09

Community · Accepted Answer · 2017-05-23 11:48:54Z

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

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Nov 14, 2012 at 20:31

Mark Rajcok

365k114 gold badges501 silver badges495 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sandro Over a year ago

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...

Collectives™ on Stack Overflow

How to use jquery columnize with angularJs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related