离子ng重复同位素部分不起作用

时间:2014-09-25 08:00:13

标签: jquery ajax angularjs jquery-isotope ionic-framework

我根据此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>

0 个答案:

没有答案