Angular-bootstrap pagination - not getting variable in 'scope'

Question

HTML

<table ng-show="ecu.dtcs">
    <tbody>
        <tr>
            <td colspan="4">
                <uib-accordion close-others="true">
                    <uib-accordion-group ng-repeat="dtc in dtcList track by $index">
                        ...
                    </uib-accordion-group>
                </uib-accordion>
            </td>
        </tr>
    </tbody>
</table>

<uib-pagination
    total-items="{{ totalItems }}"
    ng-model="{{ currentPage }}"
    items-per-page="{{ itemsPerPage }}"
    boundary-link-numbers="true"
    ng-change="setPagingData(currentPage)">
</uib-pagination>

JS (directive)

link: function (scope) {

    scope.showEcuDetails = function (ecu) {

        // For pagination
        scope.itemsPerPage = 20;
        scope.totalItems = ecu.dtcs.length;
        scope.currentPage = 1;

        scope.setPagingData = function(currentPage) {
            var start = (currentPage - 1) * scope.itemsPerPage,
                end = currentPage * scope.itemsPerPage;

            scope.dtcList = ecu.dtcs.slice(start, end);
        };

        scope.setPagingData(scope.currentPage);
    };
}

ecu.dtcs: Holds all the data that I want
dtcList: Holds the sliced list each 20 elements

I have used the Angular-Bootstrap documentation and have also referenced this source (except have used ng-change to alter the list instead of a $watch on the scope)

I have debugged the application thoroughly and I can see that dtcList is becoming populated wiht the first 20 elements. However, going into the HTML, there is nothing displayed

I have also tried to write a .filter (like is shown here) but because the variables are being set in the scope of the directive and not a controller, my filter, cannot see the variables

N.B: For the pagination settings, to reference the scope variables (i.e. totalItems), I have used Angular expressions like displayed in this question and also basic strings as in the documentation (i.e. "totalItems")

I think the concepts and the way I have it written at the moment should work, it's just the HTML cannot see dtcList for some reason

EDIT

It may help to know that this is in an angular-ui-bootstrap modal. Below the function call to setPagingData(), I have this:

$uibModal.open({
    templateUrl: "ecuDialog.html",
    size: "lg",
    windowClass: "modalDialogs networkTest__largeContentDialog",
    scope: scope
});

The templateUrl is that of which I've written in the HTML section of this question. It crossed my mind whether this was the issue but my colleagues have assured me that it would not impact the result in any way.

EDIT 2

Unfortunately, 1 of our colleagues who specialises in AngularJS has viewed the code along with the documentation and cannot see any errors within it. Could it be an Angular bug or is it the combination of multiple elements from angular-ui-bootstrap that it doesn't like?

Things I am combining are:

ui-modal
ui-accordion
ui-pagination

Unfortunately I cannot as the app is too dense and pulls data/elements from many other places and they are too heavy to mock. I will update my question to provide more details though — wmash, Jun 10 '16 at 10:09

score 0 · Accepted Answer · answered Jun 11 '16 at 16:34

0

Solution:

My code was correct. My colleague had an attempts at it and just took the code I had written into another directive. We were both unsure why this was the case, maybe Angular doesn't like overcrowded directives?

answered Jun 11 '16 at 16:34

wmash

4,032
3
31
69

Angular-bootstrap pagination - not getting variable in 'scope'

1 Answers1