Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I'm facing a problem with a lazy loaded list of books. Initialy I load 10 books. If user is scrolling down, I load the next 10 books.

Let's say the user is now on "page" 4. Then he clicks on the 35th book to get the details of it. After returning to the list, he just sees the first 10 books and has to redo all the lazy loadings.

Is there any "caching" or storing possibiblity to avoid this? Thanks a lot for any hints!

[UPDATE] thanks for your replys!

routes

.state('app.books.list',{
    ...
    ...
    resolve: {

        books : function(bookFactoryBook) {
           return booksFactoryBook.getList({page : 1});
        }

    }
})
.state('app.books.details',{

    // just loads detail

})

ctrl (controller as syntax)

function bookControllerList(_books, ....) {

     vm = this;
     vm.books = _books;

     ......

     // lazy loader just appends new data on vm.books
     // after loading was successful

    /**
     * init lazy loader
     *
     * @desc    initialize lazy-loader for books
     * @return  {void}
     * @private
     */
    function _initLazyLoader() {

        if(_isLazyLoadingEnabled() === false) {

            return;

        }

        // config lazy loader
        var mapper = {
            data            :   'books', // vm.books
            isEnabled       :   'lazyLoadingEnabled',
            indicatorId     :   'lazyLoadingIndicatorId',
            onDataLoaded    :   _afterLazyLoading
        };

        if(booksFactoryLazyLoader.setup(vm, mapper) === false) {

            // failed to initialize lazy loader - disable feature
            vm.lazyLoadingEnabled = false;

        } else {

            vm.lazyLoadingEnabled = true;

        }

    }

    /**
     * after lazy loading
     *
     * @desc    manages data manipulation after lazy loading
     * @param   books       -   {Array} -   new loaded data to manipulate
     * @return  {void}
     * @private
     */
    function _afterLazyLoading(books) {

        // user logged in?
        if(authFactorySession.isAuthorized() === true) {

            // try to flag favorites in received books
            books = _addFavoriteFlags(books);

        }

        // append data to vm
        vm.books = vm.books.concat(books);

    }

}

Could it be an issue with the controller as syntax? Or how can I extend the lifetime of my scope / vm object?

If I change the order of the states, and connect them as parent / child (app.books.list and app.books.list.detail) it doesn't change anything.

thanks for any hints

share|improve this question
    
how are you implementing lazy loading? can you put together some minimal plnkr/jsfiddle? – chris Jun 5 '15 at 20:44

Without seeing your code, your controller containing the reference of the list is being reinitialized after viewing the details of the book. If you keep that around, or move the list of books to a scope that has a longer life, you should be fine.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.