角磚石 - 擴大項目

Question

概括地說，我想用角砌築指令（http://passy.github.io/angular-masonry/）實現是這樣的：http://codepen.io/desandro/pen/htsui

我已經嘗試了很多不同的方法，但更大div只是展開在下一個div的頂部。

這是HTML：

<div class="row" ng-controller="DemoCtrl"> 
     <div class="span12"> 
      <div masonry > 
       <div class="masonry-brick" ng-repeat="brick in bricks"> 
        <div ng-class="brick.cssClass" ng-click="changeBrick($index)"> 
         <img ng-src="{{brick.src}}" alt="A masonry brick" > 
         <span>Here is a load of text to see what fits in here and such </span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

這是角代碼的片段：

app.controller('DemoCtrl', function ($scope, $timeout,$element) { 

.. 

$scope.changeBrick= function changeBrick(i) { 
    $scope.bricks[i].cssClass = 'big'; 
    $element.masonry(); 
    $element.masonry('layout'); 
} 
} 

的風格只是這個測試：

.small{ 
width: 200px; 
background-color: lime; 
} 

.big{ 
width: 400px; 
background-color: red; 
} 

吃的那一刻，div只是展開在下一個div的頂部 - 我真的希望砌體做它的事情和r調整其他divs。

Answer 1

嘗試廣播masonry.reload消息以獲取角度石工刷新佈局。我遇到了一個半類似的問題，這似乎工作：https://stackoverflow.com/a/27967782/3191599

function refresh() { 
    common.$timeout(function() { $scope.$broadcast('masonry.reload'); }, 100); 
}