Angular scope not updating

Posted 4 years ago by itstrueimryan

EDIT: view I should say, not scope.

Hello! I know this is more Angular than Laravel, but I'm trying to integrate Angular into a Laravel project and you guys are awesome so I thought I'd post it here anyway. Basically, I have two Angular views that share a controller and a factory: the index view (show all items), and an add page for adding a new item. Unfortunately, since I'm caching the results of show all, when I add a new item and go back to the index view (without refreshing), it doesn't update the list with the new item.

How do I tell Angular that I want to use the updated version of scope.pages (not the cached version) when (and only when) I add a new item? I also don't want to have to ping the database again just to get the most up-to-date list, just want to use that local scope variable. Here are my files:

Factory

app.factory('PagesFactory', ['$http', function(http)
{
 var factory = {};

 factory.getPages = function()
 {
    return http({ url: '/pages', method: 'GET', cache: true });
 }

 factory.storePage = function(page)
 {
    return http.post('/pages/', page);
 }

 return factory;
}

Controller

app.controller('PagesController', ['$scope', '$http', '$location', 'PagesFactory', function(scope, http, location, PagesFactory)
{
 // Return all pages
 PagesFactory.getPages()
    .success(function(pages) {
   scope.pages = pages;
    });

 // Store new page
 scope.addPage = function()
 {
    var page = {
   name: scope.name,
   description: scope.description,
   status: scope.status
    };

    PagesFactory.storePage(page).success(function(page) 
  {
       if(typeof page.id != 'undefined')
       {
             // So scope is being updated...
             scope.pages.push(page);

             // But when i redirect to the index page I'm still getting the cached version
             location.path('/pages');
       }

   });
 };
}]);

Thanks for your help!

Please sign in or create an account to participate in this conversation.