Actualmente estoy tratando de actualizar de angularjs 1.2 a 1.3 y he descubierto un problema. La aplicación tiene una directiva de paginación:

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);
        }
    }

}

La plantilla es:

<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>

Ejemplo de uso:

<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>

Lo que está sucediendo es que ng-repeat muestra correctamente el número de filas, pero cada fila no contiene ningún dato del objeto currentItem. La fila contiene todo el HTML, pero le faltan los valores currentItem.

He realizado bastantes búsquedas sobre este problema, pero aún no he encontrado una solución.

Salud

2
john.byrne 10 oct. 2019 a las 03:53

1 respuesta

La mejor respuesta

Es posible que desee incluir $ parent antes de currentItem. Algo como abajo

Uso:

<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>

Aquí hay un plunker con un ejemplo funcional.

Tenga en cuenta que su código se modifica para deshacerse de las dependencias.

1
Angry Coder 10 oct. 2019 a las 02:20