尝试使用我正在使用的 angularjs 应用程序来获取 Packery.js 。
由于某些原因,他们似乎在一起玩得并不好。我以为可以用isInitLayout
false设置解决它,但是仍然没有爱。
这是我的(引导3)HTML:
<div class="row" class="js-packery"
data-packery-options='{ "itemSelector": ".packery-item",
"gutter": 10,
"columnWidth": 60,
"isInitLayout": false }'>
<artifact class="packery-item" ng-repeat="(index, thing) in data | limitObjectTo:4" thing="thing"></artifact>
</div>
我开始怀疑这是否是因为我使用的Artifact指令...
最佳答案
如前所述,您必须制定一个处理Packery的指令。
该指令使Packery在我正在处理的项目中与AngularJS一起使用。
工作提琴:http://jsfiddle.net/8P6mf/2/
HTML:
<div class="wrapper">
<div ng-repeat="item in test" danny-packery>
{{item.name}}
</div>
</div>
JavaScript:
var dannyPackery = app.directive('dannyPackery', ['$rootScope', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
console.log('Running dannyPackery linking function!');
if($rootScope.packery === undefined || $rootScope.packery === null){
console.log('making packery!');
$rootScope.packery = new Packery(element[0].parentElement, {columnWidth: '.item'});
$rootScope.packery.bindResize();
$rootScope.packery.appended(element[0]);
$rootScope.packery.items.splice(1,1); // hack to fix a bug where the first element was added twice in two different positions
}
else{
$rootScope.packery.appended(element[0]);
}
$rootScope.packery.layout();
}
};
}]);