带有 AngularJS 的 Jquery 砌体

Question

在我的项目中，我尝试实现 jquery masonry。但它开始工作了。我尝试谷歌搜索，但发现了一些帖子。但我试过它不起作用。

我的指令代码是

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>

我从网络服务加载呼喊声。请帮我完成这项工作...

Answer 1

将我在评论中提到的内容作为答案。这实际上可以使用模板而不是使用 .append() 来完成，它会更干净。您需要的是一个包含列列表和 ng-repeat 的模板，应该也可以正常工作，但是您必须等待第一个项目被插入，然后才能计算插入第二个项目的位置；因此在这里使用 .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

Answer 2

您可能希望在 $last ng-repeat 上触发 masonry() 调用，而不是使用 $watch。我最近刚刚回答了一个关于这个的问题，所以我会在那里推荐你：https://stackoverflow.com/a/14656888/215945