Can't use ng-transclude inside dir-paginate

[Joe-5mith]

I have a directive with an isolate scope that uses dir-paginate:

function myListDirective() {
    return {
        restrict: 'E',
        replace: true,
        scope: { list: '=',  ... },
        templateUrl: 'path/to/template/my_list.html',
        controller: function() { ... },
        controllerAs: 'myListDirectiveController',
        bindToController: true,
        transclude: true
    };
}

where my_list.html is like:

<div>
    <ul>
               ...

        <li dir-paginate="item in myListDirectiveController.list | itemsPerPage: 10 :  'myPager'" 
                pagination-id="myPager" 
                total-items="100" 
                current-page="myListDirectiveController.currentPage">
                <div>
                    ... 
                    <ng-transclude></ng-transclude>
                </div>
        </li>
    </ul>

    <dir-pagination-controls pagination-id="myPager" 
                             boundary-links="true" 
                             max-size="9"
                             on-page-change="myListDirectiveController.updateList(newPageNumber)"></dir-pagination-controls>

</div>

I would like to use this directive like:

<my-list-directive list="people" ... >
    <p>{{ item.name }}</p> // where item is from the `dir-paginate` used above
</my-list-directive>

where:

people = [
    {name: 'Joe Smith'},
    {name: 'Jane Doe'},
    ...
]

However, this gives the following error and nothing shows up in the ng-transclude element: "Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <ng-transclude>".

[michaelbromley]

Oh man, this is a use case I had never imagined. Can't guarantee when I'll have time to work on this - I had a bad feeling that it'll take a lot of debugging...

[Joe-5mith]

Thanks for the quick reply (and this module). The basic use case is using dir-paginate in directives with ng-transclude.

For example, one could build a reusable list component/directive. I hope that helps.

[madriman]

Hello,

I have the same need on this use case. I have a list that uses custom directive aw-transclude and the transclude function "transcludeFnc" is not defined anymore. Note that it works correctly if I replace dir-paginate by the standard ng-repeat

Regards

<ul dnd-list="awDraggableListsCtrl.availableList.items"
                    dnd-drop="awDraggableListsCtrl.onDrop(awDraggableListsCtrl.availableList, item, index)">
                    <li dir-paginate="item in awDraggableListsCtrl.availableList.items | itemsPerPage: 10"
                        dnd-draggable="awDraggableListsCtrl.getSelectedItemsIncluding(awDraggableListsCtrl.availableList, item)"
                        dnd-dragstart="awDraggableListsCtrl.onDragstart(awDraggableListsCtrl.availableList, event, item)"
                        dnd-moved="awDraggableListsCtrl.onMoved(awDraggableListsCtrl.availableList, item)"
                        dnd-effect-allowed="move"
                        dnd-dragend="awDraggableListsCtrl.onDragend(awDraggableListsCtrl.availableList)"
                        dnd-selected="awDraggableListsCtrl.onSelected(awDraggableListsCtrl.availableList,item)"
                        ng-class="{'selected': item.selected}"
                        ng-hide="item.filtered || (awDraggableListsCtrl.availableList.dragging && item.selected)"
                        aw-transclude>
                    </li>
                </ul>
                <dir-pagination-controls boundary-links="true" class="text-center col-xs-12">
                </dir-pagination-controls>

function awTransclude($filter, $compile, $timeout) {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs, ctrl, transcludeFnc) {
            $timeout(function () {

                if (!transcludeFnc) {
                    throw minErr('ngTransclude')('orphan',
                        'Illegal use of ngTransclude directive in the template! ' +
                        'No parent directive that requires a transclusion found. ' +
                        'Element: {0}',
                        startingTag($element));
                }