0

我现在搜索了相当长的时间，但仍然找不到解决问题的方法。我对packery一无所知，但我发现这段代码可以完美运行并且可以完成我想做的事情。

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: '.module',
      columnWidth: '.module-sizer'
    });
    angular.forEach(packery.getItemElements(), function(item) {
      var draggable = new Draggabilly(item);
      packery.bindDraggabillyEvents(draggable);
    });
    packery.layout();
  });
} }; }]).

所以当我有一个小部件数组时，它工作得很好，我没有添加或删除一个元素，而只是使用 ng-show 来隐藏/显示它们。现在我不再想使用 ng-show，而是从初始的空数组中添加和删除我的小部件

.controller('WidgetCtrl', ['$scope', function ($scope) {
$scope.counter = 0;
$scope.current = 0;
$scope.widgets = [];


$scope.addWidget = function(name){
  var widgets = {
    widget1: {name: 'widget1', id: ''},
    widget2: {name: 'widget2', data: {dataVariable: 'some data'}, id:''}
  };
  var widget = widgets[name];

 if (widget) {
    $scope.widgets.push(widget);
    $scope.widgets[$scope.current].id = $scope.widgets.length-1;
    console.log('index of the last widget added: ' + $scope.widgets[$scope.current].id);
    $scope.current++;}

因此，唯一可以拖动的小部件是那些最初在数组中的小部件。我在页面加载后添加的任何小部件都将不起作用。我是角度新手，我正在阅读 $scope.apply 并重新编译指令，但我不确定它是否与我的问题有关

<div class="module-container" workspace>                                
                            <div class="module-sizer"></div>
                            <div class="gutter-sizer"></div>
            <div class="module" ng-repeat='widget in widgets'>
                <div dynamic-widget='widget.name' data='widget.data'> </div>
            </div>
      </div>
4

1 回答 1

0

这里的问题与 Packery 将事件绑定到网格项以执行布局并使它们“可拖动”这一事实有关，这是负责该问题的代码段：

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

因此，目前设置指令的方式发生的情况是，当包含指令的模板最初加载时，它会.module使用上述代码拾取任何匹配项并初始化打包和可拖动，从那时pckry.layout();起，您的应用程序将无法使用知道小部件的数量完全增加了。

为了确保它们在添加时被初始化，您可以做的是将范围传递给指令，如下所示：

constrain: 'A',
scope: true,
link: // ...

然后你会想像这样$scope.$watchCollection向数组中添加一个widgets：

$scope.$watchCollection('widgets', function() {
            // Call packery and draggabilly on elems here
});

我想您可能希望将初始化打包程序的逻辑移动到一个单独的函数中以更好地分离代码，但请注意，$watchCollection无论如何都会在指令第一次运行时触发，因此所有逻辑都可能在其中。

最后要注意的一件事是，您可能需要pckry.destroy();事先致电以确保获得所需的结果。不幸的是，我没有足够的时间做一个例子，所以这真的只是一个思想实验，但我希望它有所帮助！

于 2015-07-09T08:41:00.040 回答