AngularJS:表达式和 session 存储之间的数据绑定(bind)

Question

我是 Angular 的新手。我有一个带有导航栏的单页应用程序，它映射到一些 html“部分”。每个部分都通过 Angular 指令 ng-show 可视化监控变量的状态.

第一次加载后我的所有部分都已加载，所有 HTML 都在浏览器中。现在我可以做一些操作并在 sessionStorage 中保存一个对象。但是引用它的 Angular 表达式不会加载新数据!
我想要我的表达式和 session 存储之间的经典数据绑定(bind)。我怎样才能做到这一点？

这是我的html的片段:

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

这是从 sessionStorage 加载数据的 Controller

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

  pdc = this;

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

}]);

Angular 评估 myData 的值仅在第一次加载页面时，而不是每次触发表达式的新计算 myData变化……那是我的问题……

Edit: I simulate my problem in this plnkr http://plnkr.co/edit/vG1IGOPsJlbUPOzYsY03?p=preview As you can see, when you press update the value displayed from session storage is not updated. You can see new values only by refreshing the page.

Answer 1

您可以将函数传递给 $scope.$watch评估 $scope 上不存在的数据.例如，sessionStorage , this , SomeService或任何数据源。

因此，要执行您的要求，您应该注入(inject) $scope进入你的 Controller ，设置一个$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;
};

updated plunker