Appgyver Steroids, updated object in Web View won't show

Question

I'm developing a HTML5 mobile app with Appgyver Steroids and AngularJs. The app is using a global javascript object to fill with info along the steps and is used by the whole application. Everything was working great until I needed to create a gallery.html and push it as a web layer from my main controller. The main.html and gallery.html got their own controllers. Gallery.html display all the pictures as expected from the javascript object and when I remove them they being removed also from the javascript object, as expected. But, when I return to the main.html and click "gallery" they are all there again in gallery.html.

I figure there must be a scope problem or a matter of multiple instances? How do I get gallery.html to read the actual object (the one with no pictures after all being removed)? Why is gallery.html not updating its values? I've been running the code and it is nothing wrong with it, but when I use it in a web layer, this happens.

In main controller:

$scope.gallery = function(roomId, detailId) {
    pictures = inspectionService.getPictures(roomId, detailId);

    if (pictures.length > 0) {
        webView = new steroids.views.WebView("/views/inspection/gallery.html?roomId=" + roomId + '&detailId=' + detailId);
        steroids.layers.push(webView);
    } else {
        this.camera();
    }
};

In gallery controller:

function init(){
    roomId = steroids.view.params.roomId;
    detailId = steroids.view.params.detailId;
    updateGallery();
}

//UPDATING GALLERY
function updateGallery() {
    $scope.pictures = inspectionService.getPictures(roomId, detailId);
    $scope.info = inspectionService.getRoom(roomId).name + ": " + inspectionService.getDetail(roomId, detailId).name;
};

//REMOVE PICTURE
$scope.removePicture = function(pictureUri) {
    inspectionService.removePicture(roomId, detailId, pictureUri);
    updateGallery();

    if (pictures.length <= 0) {
        steroids.layers.pop();
    }
};

score 6 · Accepted Answer · answered Nov 06 '13 at 09:53

6

AppGyver employee here! The WebViews in Steroids are separate "browser" instances, each with their own DOM and JavaScript runtime. I wrote a quick guide on the subject, check it out: http://guides.appgyver.com/steroids/guides/steroids-js/sharing-data-between-webviews/

Basically, you need to ensure that the inspectionService state is maintained between your different views – the last section in the guide about using a background HTML WebView should be useful!

answered Nov 06 '13 at 09:53

harsa_

632
3
8

Thanks harsa_! I followed you guide but still can't get it to work. My background.html wont't load. Can you please provide a code example? Shouldn't it be enough with just using localStorage to store my javascript object? In that way there will only be one json object regardless of how many servicer instances? Im really stuck here. – 0xRLA Nov 06 '13 at 13:13
1

Of course, an alternative is to code your service so that it only accesses/manipulates a single `localStorage` item, which would ensure a "master" object. Having a preloaded `background.html` is a much more robust solution, so maybe you don't need that. Tell me if you get a `localStorage` solution working! – harsa_ Nov 07 '13 at 07:57
Thx! I've been making progress since my last post. I'm now use localStorage to store my "master" object and my service to set and get from it. The controllers are access master object through the service. I still having some problems which I believe are the result of inconsistent states as you explained. I'm very interested in getting the background.html solution to work. I followed your guide but can't get the preloaded background.html to load. In other words, the javascript in background.html won't run. Can you elaborate about the bakground.html solution please? – 0xRLA Nov 07 '13 at 12:13

Appgyver Steroids, updated object in Web View won't show

1 Answers1