CODEWITHSUNDEEP
angularjsdirective
john.byrne
john.byrne

Reputation: 23

upgrade angularjs 1.2 to 1.3 directive ng-repeat scope issue

Currently trying to update from angularjs 1.2 to 1.3 and have discovered a problem. The app has a paging directive:

app.directive("mobilePaginationList", function() {
 return {
        restrict: 'E',
        templateUrl: "Directives/mobilePagination/List/mobilePaginationList.html",
        transclude: true,
        replace: true,
        scope: {
            list: '=list'
        },
        link: function ($scope, $element, $attributes) {
            // code removed that is not relevant
            $scope.listToDisplay = PaginationService.from(origList).getPage(page);
        }
    }

}

template is:

<div class="row">
    <div class="col-xs-12">
        <div data-ng-repeat="currentItem in listToDisplay"  bindonce data-ng-transclude>
        </div>
        <mobile-pagination-pager data-ng-hide="vm.list.length <= 0"></mobile-pagination-pager>
    </div>
</div>

usage example:

<mobile-pagination-list data-receipt-slider-menu-toggle="active" list="receipts" data-ng-hide="list.length <= 0 || rootVm.loading.receipts.value" class="row list-group">
        <a class="row list-group-item" data-bo-id="currentItem.attachNo" ui-sref="receiptWalletDetails({receiptId: currentItem.attachNo})">
            <div class="col-xs-11">
                <div class="row">
                    <div class="col-xs-8">
                        <h4 data-bo-bind="currentItem.description"></h4>
                    </div>
                    <div class="col-xs-4 text-right">
                        <h4 data-bo-bind="currentItem.amount | currency:''"></h4>
                    </div>
                </div>
                <div class="list-group-item-text">
                    <div class="row">
                        <div class="col-xs-8">
                            <span data-bo-bind="currentItem.notes"></span>
                        </div>
                        <div class="col-xs-4 text-right">
                            <span class="text-info"
                                data-bo-bind="currentItem.createDate | date: 'd MMM yyyy'">
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </mobile-pagination-list>

What is happening is that the ng-repeat is correctly displaying the number rows but each row does not contain any data from the currentItem object. The row does contain all the HTML but is missing currentItem values.

I have done quite a few searches into this problem but yet to find a solution.

Cheers

Upvotes: 2

Views: 53

Answers (1)

Angry Coder
Angry Coder

Reputation: 145

You might want to include $parent before currentItem. Something like below

Usage: 

<mobile-pagination-list data-receipt-slider-menu-toggle="active" list="receipts" data-ng-hide="list.length <= 0 || rootVm.loading.receipts.value" class="row list-group">

    <a class="row list-group-item" data-bo-id="$parent.currentItem.attachNo" ui-sref="receiptWalletDetails({receiptId: currentItem.attachNo})">
        <div class="col-xs-11">

          <h4 ng-bind="$parent.currentItem.description"></h4>
          <h4 ng-bind="$parent.currentItem.amount | currency:''"></h4>
          <span ng-bind="$parent.currentItem.notes"></span>
          <span class="text-info" ng-bind="$parent.currentItem.createDate | date: 'd MMM yyyy'">
          </span>

        </div>
    </a>
</mobile-pagination-list>

Here is a plunker with a working example.

Please note that your code is modified to get rid of dependencies.

Upvotes: 1

Related Questions