【问题标题】:How to use jquery columnize with angularJs如何在 angularJs 中使用 jquery columnize
【发布时间】:2012-11-14 03:10:35
【问题描述】:

我想使用 jquery 中的 columnize 插件在我的 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 destroy 的 dom 然后 ng-repeat 抛出一个它不能 insertBefore 空元素的异常。我觉得我的方法是错误的。有什么建议吗?

【问题讨论】:

  • jquery columnize 的链接已损坏。此外,在您的 html 代码中,您没有在任何地方使用 columnize 指令。
  • @sandro 尝试将terminal: true 属性添加到指令配置中。正如 tosh shimayama 正确指出的那样,您应该在 &lt;ol columnize&gt;...&lt;/ol&gt; 上声明您的 columnize 指令的用法。
  • @toshshimayama 对格式不正确的问题感到抱歉!现在应该解决了。我尝试添加“终端:真”,但这只会阻止指令完全执行! (没有抛出错误,但看起来 ng-repeat 从未执行过。)

标签: jquery angularjs multiple-columns


【解决方案1】:
.directive('columnize', function($timeout) {
   return {
     restrict: 'A',
     link: function(scope, iElement, iAttrs) {
              $timeout( function(){ iElement.columnize({columns: 2}), 0});
           }

虽然这似乎可行,但我认为这不是正确的方法。我记得读过another post,其中 $timeout 用于在初始渲染后运行一个函数,这似乎在这里工作。

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

Fiddle

【讨论】:

  • 啊,这让我更接近了!所以是的,这会导致它正确渲染。但问题是,当模型更新并且 ol 中的元素数量发生变化时,它会再次崩溃,并出现与使用 $timeout 之前相同的错误...
猜你喜欢
  • 2014-05-05
  • 2016-07-08
  • 1970-01-01
  • 1970-01-01
  • 2016-06-12
  • 1970-01-01
  • 2019-11-28
  • 2017-12-31
  • 1970-01-01
相关资源
最近更新 更多