Question

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

第一次加载后我的所有部分都已加载，所有HTML都在浏览器中。现在我可以做一些操作并在sessionStorage中保存一个对象。但Angular表达式提到它不会加载新数据！我想在我的表达式和会话存储之间进行经典的数据绑定。我怎么能这样做？

这里有一段我的HTML：

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

这是从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

仅在控制器中的表达式被调用一次 - 当加载控制器时。因此，您的更新将不会更改myData值。您应该做的是在update函数中添加更新myData：

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

Answer 2

您可以将函数传递给$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;
};

<强> updated plunker