我根据此jsFiddle创建了Ionic列表。但出了点问题。指令获得容器的'同位素'类,但对物品没有任何作用。项目最初从本地存储加载,然后由ajax请求更新。这是代码示例:
.directive('isoRepeat', function () {
return {
scope: true,
templateUrl: 'templates/partials/item.html',
link: function (scope, element, attrs) {
var options = {
itemSelector: 'ion-item', // tried class selectors as well
layoutMode: 'masonry'
};
element = $(element);
element.isotope(options);
scope.$watch('scope.items', function (newVal, oldVal) {
element.isotope('reloadItems');
}, true);
}
};
})
主要模板:
<ion-view hide-nav-bar="true">
<div class="bar bar-header bar-assertive" style="height: 20px;"></div>
<ion-content class="padding has-footer">
<ion-list class="wine-list" data-iso-repeat>
</ion-list>
</ion-content>
项目模板:
<ion-item ng-repeat="item in items" class="item">
<div class="item-block">
<img ng-src="{{item.img}}">
</div>
<div ng-click="menu($event)" class="target"></div>
<div class="options" >
<div class="options-block">
<div >
<a href="url"
class="recipe balanced-bg">
link
<div class="more">more</div>
</a>
<a href="url2" class="sheet assertive-bg"
>
link2
</a>
</div>
</div>
<!--<div ng-click="menuClose($event)" class="close button button-small button-dark icon ion-close"></div>-->
</div>