使用AngularJS和ng-storage进行会话存储

Question

我正在开发一个聊天应用程序。 我有下一个HTML：

<input type='text' id='nameInput' placeholder='Your Name'>

我也在使用AngularJS，这是我的模块：

var app = angular.module('principal', ['ngStorage']);
app.controller('MainCtrl', function($scope, $sessionStorage) {
  $scope.$storage = $sessionStorage.$default(#nameInput);
});

如您所见，我将ngStorage作为依赖项。 我正在尝试使用sessionStorage输入值，因此，如果用户不小心刷新了页面，他的名字仍然写在输入中，但是我的代码不起作用，该怎么办？

更新现在，感谢马特，我解决了我的疑问。

Answer 1

您需要将视图（在本例中为输入元素）绑定到模型中的值。 您可以使用ng-model进行此操作。 例如：

<input type="text" ng-model="state.nameInput" placeholder="Your Name">

然后，您只需要在控制器中设置范围即可。

$scope.state = {
    nameInput: 'John'
};

---

如果要改为使用ngStorage作为绑定（而不是常规的$ scope值），请在控制器中尝试以下操作：

$scope.$storage = $sessionStorage.$default(/* any defaults here */);

并在您的html中

<input type="text" ng-model="$storage.nameInput" placeholder="Your Name">

---

基本上，您的意思是； 将$sessionStorage对象直接放在$scope ，以便视图可以引用它及其子级。 然后，您使用ng-model告诉<input>您想要其值引用该作用域上的特定子ng-model 。 因此，当您更改输入中的值时，它将更改范围模型值，这又将更新会话存储。