Angularjs with Packery.js
Angularjs with Packery.js
试图获得Packery.js使用我正在使用的angularjs应用程序。
出于某种原因,他们似乎在一起玩得不好。我以为它可能会通过isInitLayout
错误的设置来解决,但是,仍然没有爱。
这是我的(引导程序 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>
我开始怀疑这是否是因为我正在使用的工件指令......
如前所述,您必须制定一个处理 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();
}
};
}]);
你找到的任何JS库都不会简单地与Angular一起使用。Angular 编译 DOM 会导致其他库丢失上下文。您必须编写自定义指令。
我找到了砌体的现有指令:https://github.com/passy/angular-masonry 和包装与砌体非常相似,所以我相信你可以将其用于包装。
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- Node.js v6.2.0类扩展不是函数错误
- 当js函数's已执行
- 要求未定义JS回调参数
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 如何从Java/scala调用js美化程序
- 如何更改<svg>标记为<img>用js标记
- 如何使用 node.js 比较两个 json 数组
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- wordpress和packery.js的集成问题,但适用于非wordpress网站
- Angularjs with Packery.js
- AngularJS ng-repeat and Packery.js