0

かなりの時間を検索しましたが、まだ問題の解決策を見つけることができません。パッカリーについては何も知りませんが、完全に機能し、やりたいことを実行するこのコードを見つけました。

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++;}

したがって、ドラッグできるウィジェットは、最初に配列にあるウィジェットだけです。ページが読み込まれた後に追加したウィジェットは機能しません。私はAngularが初めてで、$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に配列に a を追加します。widgets

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

packery を初期化するためのロジックを別の関数に移動して、コードの分離を改善する必要があると思いますが$watchCollection、ディレクティブが最初に実行されたときに が起動することに注意してください。

pckry.destroy();最後に注意すべきことは、目的の結果を確認するために事前に電話する必要がある場合があることです。残念ながら、例を作るのに十分な時間がないので、これは単なる思考実験ですが、役に立てば幸いです!

于 2015-07-09T08:41:00.040 に答える