Как использовать столбцы jquery с angularJs

Я хочу использовать плагин columnize из jquery для настройки столбцов в моем приложении AngularJS. . Мой супер наивный подход был:

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

С помощью этого HTML-кода:

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

Проблема в том, что внутри элемента я использую ng-repeat. columnize уничтожает дом, а затем ng-repeat выдает исключение, которое не может быть вставлено перед нулевыми элементами. Я чувствую, что мой подход просто неверен. Какие-либо предложения?


jquery angularjs multiple-columns
person Sandro    schedule 14.11.2012    source источник
comment
Ссылка на jquery columnize не работает. Кроме того, в вашем html-коде вы нигде не используете директиву columnize.   -  person Tosh    schedule 14.11.2012
comment
@sandro Попробуйте добавить свойство terminal: true в конфигурацию директивы. И, как правильно указал tosh shimayama, вы должны заявить об использовании вашей директивы columnize в файле <ol columnize>...</ol>.   -  person John Doe    schedule 14.11.2012
comment
@toshshimayama Извините за плохо отформатированные вопросы! Это должно быть исправлено сейчас. Я попытался добавить «терминал: правда», но это только предотвратило полное выполнение директивы! (Ошибок не возникало, но похоже, что ng-repeat никогда не выполнялся.)   -  person Sandro    schedule 15.11.2012

Ответы (1)


arrow_upward
0
arrow_downward 

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

Хотя это, кажется, работает, я не думаю, что это правильный способ сделать это. Я вспомнил, что читал другой пост где $timeout использовался для запуска функции после начального рендеринга, и здесь это работает.

Надеюсь, вы получите лучший ответ.

Скрипка

person Mark Rajcok    schedule 14.11.2012
comment
Ах, это сближает меня! Так что да, это заставляет его правильно отображать. Однако проблема заключается в том, что когда модель обновляется и количество элементов в ol изменяется, она снова вылетает с той же ошибкой, что и до использования $timeout... - person Sandro; 15.11.2012