0

I have a Chrome extension uses an ng-show expression that checks a variable of Chrome storage, and displays a big blue button if the value is at zero. When opening the extension, however, the button could show up on the first click, or you may have to close and reopen the extension several times before it shows up (simply showing a blank body). This has been incredibly frustrating and is obviously a UX problem that I would like to fix before I publish the extension to the public.

Here is the div code from within the main view of the extension:

<div id="no_vseeks" ng-show="vseeks.length === 0">
    <div class="big-button-container"><a href="#!newVSeeks" class="big-button"><h1>CREATE</h1></a></div>
</div>

The expression is referring to an array called 'vseeks' in the Chrome local storage.

And here is what the extension is supposed to output:

But this is what the extension will show (seemingly) at random.

Please inform me if I need to include more code or images.

EDIT: Here's the main controller where the vSeeks array is being retrieved from Chrome storage. The console logs show that after the chrome.storage.get function is called, the array is present, but yet I still get a blank view.

app.controller('mainController', function($scope, $window) {
$scope.toggleAcc = function($event) {
    var currentAcc = $event.currentTarget;
    currentAcc.classList.toggle("active");
    var panel = currentAcc.nextElementSibling;
    if (panel.style.display === "block") {
        panel.style.display = "none";
    } else {
        panel.style.display = "block";
    }
}
$scope.sendID = function(id) {
    currentVID = id;
    $window.location.href = "#!delete";
}
var noVseeks;
var home_button;
var newV_button;

console.log('controller reached', $scope.vseeks);
chrome.storage.sync.get('userData', function(items){
    $scope.vseeks = items.userData.vSeeks;
    console.log('inside chrome storage get', $scope.vseeks);
    home_button = document.getElementById('home_button');
    newV_button = document.getElementById('newV_button');
    console.log('variables: ', home_button, newV_button);
    if ($scope.vseeks.length < 1) {
        home_button.style.visibility = "hidden";
        newV_button.style.visibility = "hidden";
    }
    else {
        newV_button.style.visibility = "visible";
        if (home_button.style.visibility == "visible") {
            home_button.style.visibility = "hidden";
        }
    }
});

});

Ryan Spargo
  • 3
  • 3
  • I'm using AngularJS. – Ryan Spargo Jan 31 '18 at 12:21
  • I think you should add a console.log or a watch to that variable, I am not sure it updates like it should, ng-show cannot be the problem here since its job is just to check if the expression is true or not. – Boanta Ionut Jan 31 '18 at 12:23
  • Could you post your controller and the way you handle vseeks model? – Panos K Jan 31 '18 at 12:31
  • I've added the controller and the results of console logging to the post. – Ryan Spargo Jan 31 '18 at 12:35
  • have you tried forcing a digest using $scope.$apply within the sync.get function? (sounds like angular hasn't synced with the DOM) – user1821052 Jan 31 '18 at 18:02
  • I am taking a guess here.... try using `ng-if` instead of `ng-show`. [Difference between ng-if and ng-show](https://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide) – Gowthaman Jan 31 '18 at 18:13
  • @user1821052 $scope.$apply seems to be working just fine! Thank you, I was unaware of its existence. – Ryan Spargo Jan 31 '18 at 18:56

1 Answers1

0

I am unfamiliar with Chrome.storage.sync but it must be returning a non-angularjs promise (i.e. not $q). In that scenario, the function you are running upon resolve is executing outside of the angular digest cycle -- angular doesn't know it should be doing anything. The way to force angular to run its cycle is to use $scope.$apply. This will synchronize the model to the view and vice versa.

user1821052
  • 484
  • 5
  • 14
  • This worked out great, thank you! Chrome.sync.storage uses it's own callback functions, so you're right in assuming it returns a non-angular promise. – Ryan Spargo Feb 01 '18 at 06:30