AngularJS NG重复和Packery.js [英] AngularJS ng-repeat and Packery.js

问题描述

我想实现在angularJS应用packery。

当我定义项手动一个一个（见注释HTML code），Packery工作正常。
当我尝试做同样的事情与NG-重复循环，packery不起作用。

我

如何才能与NG-重复packery工作在angularJS模板？

模板：

 ＆LT; D​​IV CLASS =项容器工作空间＆GT;  ＆LT; D​​IV CLASS =模块施胶机＆GT;＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =阴沟施胶机＆GT;＆LT; / DIV＆GT;  ＆LT; D​​IV
    NG-重复=项中的项目
    类=项＆GT;
         ＆LT;！ - 我的{{角内容}}在这里 - ＆GT;
  ＆LT; / DIV＆GT;  ＆LT;  - 这工作： - ＆GT;
  ＆LT;！ - 
  ＆LT; D​​IV CLASS =项＆GT;
    第1项
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =项＆GT;
    项目2
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =项＆GT;
    项目3
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =项＆GT;
    项目4
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =项＆GT;
    项目5
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =项＆GT;
    项目6
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =项＆GT;
    项目7
  ＆LT; / DIV＆GT;
   - ＆GT;＆LT; / DIV＆GT;
 

角指令的基础上：
HTTP：//$c$cpen.io/gruntruk/pen/Cpewt/

  myApp.directive（'工作空间'，['$ rootScope'，函数（$ rootScope）{
    返回{        限制：'A'，        链接：功能（范围，元素，ATTRS）{            element.ready（函数（）{                变种packery =新Packery（元素[0]，{
                    的rowHeight：.module施胶机'，
                    itemSelector：.item'，
                    columnWidth时：.module施胶机
                }）;                angular.forEach（packery.getItemElements（）函数（项目）{
                    VAR拖动=新Draggabilly（项目）;
                    packery.bindDraggabillyEvents（可拖动）;
                }）;                packery.layout（）;            }）;        }
    };
}]）;
 

解决方案

好吧，我找到了答案。

1），我不得不使用一个指令与事件由控制器来接收

2）我不得不添加一个setTimeout的。

  app.directive（'lastRepeat'，函数（）{
    返回功能（范围，元素，ATTRS）{
        如果（范围。$最后一个）的setTimeout（函数（）{
            。范围$放出（'是以lastElement'，元，ATTRS）;
        }，1）;
    };
}）;
 

I am trying to implement packery in an angularJS application.

When I define the items manually one by one (see the commented html code), Packery works fine. When I try to do the same thing with an ng-repeat loop, packery does not work.

How can I make packery work with ng-repeat in an angularJS template?

The template:

<div class="item-container" workspace>

  <div class="module-sizer"></div>
  <div class="gutter-sizer"></div>

  <div
    ng-repeat="item in items"
    class="item">
         <!--my {{angular content}} here-->
  </div>

  <!-- this works: -->
  <!--
  <div class="item">
    item 1
  </div>
  <div class="item">
    item 2
  </div>
  <div class="item">
    item 3
  </div>
  <div class="item">
    item 4
  </div>
  <div class="item">
    item 5
  </div>
  <div class="item">
    item 6
  </div>
  <div class="item">
    item 7
  </div>
  -->

</div>

The angular directive, based on: http://codepen.io/gruntruk/pen/Cpewt/

myApp.directive('workspace', ['$rootScope', function ($rootScope) {
    return {

        constrain: 'A',

        link: function (scope, element, attrs) {

            element.ready(function () {

                var packery = new Packery(element[0], {
                    rowHeight: '.module-sizer',
                    itemSelector: '.item',
                    columnWidth: '.module-sizer'
                });

                angular.forEach(packery.getItemElements(), function (item) {
                    var draggable = new Draggabilly(item);
                    packery.bindDraggabillyEvents(draggable);
                });

                packery.layout();

            });

        }
    };
}]);

解决方案

Okay, I found the answer.

1) I had to use a directive with an event to be received by the controller

2) I had to add a setTimeout.

app.directive('lastRepeat', function () {
    return function(scope, element, attrs) {
        if (scope.$last) setTimeout(function(){
            scope.$emit('LastElement', element, attrs);
        }, 1);
    };
});

这篇关于AngularJS NG重复和Packery.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！