0

私のプロジェクトでは、jquery組積造を実装しようとしています。しかし、それは機能し始めています。グーグルしてみましたが、投稿が見つかりました。しかし、私はそれが機能しないことを試しました。

私のディレクティブコードは

shout.directive("shoutList", function($timeout) {
    return  {
        restrict : 'E',

        replace : true,

        templateUrl : 'views/shout/shout-list.html',

        scope : {
            shouts : "="
        },

        //require : "ShoutController",

        controller : function($scope)   {
            $scope.deleteShout = function() {
                console.log('shout deleted');
            }
        },

        link : function(scope, element, attr)   {
            scope.$watch('shouts', function()   {
                // console.log("changing......");
                // scope.$evalAsync(
                    document.getElementById("shout-content-holder").masonry({
                        itemSelector: '.shout'
                    })
                // );
            });
        }
    }
});

ディレクティブテンプレートは

<div id="shout-content-holder">
    <div class="shout" ng-repeat="shout in shouts">
        <p>{{shout.message}}</p>
        <img src="media/images/delete.png" width="32" height="32" ng-click="deleteShout()"/>
    </div>
</div>

Webサービスからシャウトをロードします。この作品を作るのを手伝ってください...

4

2 に答える 2

1

私がコメントで述べたことを答えとして入れます。これは、実際には.append（）を使用するのではなく、テンプレートを使用して実行できます。必要なのは、列とng-repeatのリストを含むテンプレートで、同様に機能するはずですが、最初のアイテムが挿入されるのを待ってから、2番目のアイテムを挿入する場所を計算する必要があります。したがって、ここでは.append（）を使用します。

.directive('columns', function(){
  return {
    restrict: 'E',
    scope: {
        itemList: '=', // a list of items
        colCount: "@"  // number of columns
    },
    link: function(scope, elm, attrs) {
      //console.log(scope.itemList);
      var numCols = parseInt(scope.colCount);
      var colsArr = [];
      for(var i=0; i< numCols; i++){
        colsArr.push(angular.element("<div class='column' style='width:"+(100/numCols -.5)+"%' >Col "+(i+1)+"</div>"));
         elm.append(colsArr[i]); 
      }

      angular.forEach(scope.itemList, function(value, key){
        var item = angular.element("<div class='item' style='height:"+value.height+"px; background:"+'#'+Math.floor(Math.random()*16777215).toString(16)+"'>"+value.value+"</div>");
        var smallestColumn = getSmallestColumn();
        angular.element(smallestColumn).append(item);
      });

      function getSmallestColumn(){
        var smallestHeight = colsArr[0][0].offsetHeight;
        var smallestColumn = colsArr[0][0]; 
        angular.forEach(colsArr, function(column, key){ 
          if(column[0].offsetHeight < smallestHeight){
            smallestHeight = column[0].offsetHeight;
            smallestColumn = colsArr[key]; 
          }
        }); 
        return smallestColumn;
      }
    }
  };
});

plnkr.co/edit/UyRS0clrCwDpSrYgBsXS?p=preview

于 2014-06-15T13:27:07.927 に答える
0

$ watchを使用する代わりに、$ last ng-repeatでmasonry（）呼び出しをトリガーすることをお勧めします。私は最近これについての質問に答えたので、そこであなたを紹介します： https ://stackoverflow.com/a/14656888/215945

于 2013-02-02T20:19:45.793 に答える