如何使用angularJs jquery的columnize [英] How to use jquery columnize with angularJs

问题描述

我想使用 columnize 插件从jQuery来设置列我AngularJS应用程序。我的超级幼稚的做法是：

  .directive（'columnize'，函数（）{
    返回{
        限制：'A'，
        链接：功能（范围，iElement，iAttrs）{
            $（iElement）.columnize（{列：2}）;
        }
    };
}）;
 

通过这个HTML code：

 ＆LT; OL类=问题columnize＆GT;
    ＆LT;李NG重复=问题的问题级=问题＆GT;
        ＆LT;跨度＆GT; {{question.text}}＆LT; / SPAN＆GT;
        ＆LT; UL类=选择排序=question.choices＆GT;
            ＆LT;李NG重复=选择在question.choices＆GT;
                {{选择}}
            ＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; /李＆GT;
＆LT; / OL＆GT;
 

问题是，虽然里面的元素我用NG-重复。 columnize摧毁的DOM和再NG-重复抛出一个异常，它不能的insertBefore null元素。我觉得我的做法是错误的。有什么建议？

解决方案

  .directive（'columnize'，函数（$超时）{
   返回{
     限制：'A'，
     链接：功能（范围，iElement，iAttrs）{
              $超时（函数（）{iElement.columnize（{列：2}），0}）;
           }
 

虽然这似乎工作，我不认为这是做了正确的道路。我记得读<一个href=\"http://stackoverflow.com/questions/12176925/angularjs-reset-of-scope-value-doesnt-change-value-in-template-random-behav\">another帖子其中$超时被用于运行功能的初始渲染后，这似乎在这里工作。

希望你会得到更好的答案。

小提琴

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?

解决方案

.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

这篇关于如何使用angularJs jquery的columnize的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！