[英]Angular-masonry - expanding an item
簡而言之,我想用Angular-masonry指令( 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的頂部 - 我真的想要磚石做它的事情並重新排列其他div。
嘗試播放masonry.reload
消息以獲取角度masonry.reload
以刷新布局。 我遇到了一個半類似的問題,這似乎工作: https : //stackoverflow.com/a/27967782/3191599
function refresh() {
common.$timeout(function () { $scope.$broadcast('masonry.reload'); }, 100);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.