AngularJS: data binding between expressions and sessionstorage

Question

I am new to Angular. I have a single page app with a navigation bar that maps to some html sections. Each section is visualized by monitoring the state of the variable with Angular directives ng-show.

After the first download, all my sections are loaded and all the HTML is in the browser. Now I can perform some operations and save the object in sessionStorage. But the Angular expression referencing it does not load new data! I would like a classic data binding between my expression and my session store. How can i do this?

Here is a snippet of my html:

    <div class="container" ng-show="panels.isSelected(2)" ng-controller="DataController as pdc">
        {{pdc.myData.property_foo}}         
    </div>

and this is the controller for loading data from sessionStorage

.controller('DataController', ['$window',  function($window) {

  pdc = this;

  //myData is an object
  pdc.myData = JSON.parse($window.sessionStorage.getItem("myData"));

}]);

Angular myData , myData ... ...

: plnkr http://plnkr.co/edit/vG1IGOPsJlbUPOzYsY03?p=preview , , , . .

Answer 1

$scope.$watch , $scope. , sessionStorage, this, SomeService .

, , , $scope , $watch this.myData .

app.controller('DataController', ['$window',  '$scope', function($window, $scope) {

  pdc = this;

  $scope.$watch(function () {
    return $window.sessionStorage.getItem('myData');
  }, function (value) {
    pdc.myData = value;
  });

  pdc.update = function ( value ) {

    $window.sessionStorage.setItem("myData", value);

  };

}]);

( , ):

$scope.$watch(function () {
  return pdc.myData;
}, function (value) {
  $window.sessionStorage.setItem('myData', value);
});

pdc.update = function (value) {
  pdc.myData = value;
};

Answer 2

, , - . , wont myData. myData update:

pdc.update = function ( value ) {
    $window.sessionStorage.setItem("myData", value);
    pdc.myData = value;
};

Answer 3

Auth0 , Angular -Storage.

:

• :

angular.module('angularStorageApp', ['angular-storage']);

2. , :

angular.module('angularStorageApp').controller('testCtrl', function(store) { store.set('obj', myObj); }

3. To get an object from your repository, you use this:

angular.module('angularStorageApp').controller('testCtrl', function(store) { var myObjSaved = store.get('obj'); }

Downloads:

Angular -Collection for production:

Angular Storage .min

Angular -Sports for development:

Angular Storage