对值执行操作的角度绑定

Angular binding with action on value

本文关键字：绑定 操作 执行      更新时间：2023-09-26

我有一个带有密码字段的HTML表单，它像这样保存在本地存储中：

在JS中：

$scope.localStorage = localStorage;

然后在HTML:中

<input id="pass" type="password" ng-model="localStorage.pass" required/>

在这个例子中，按原样存储密码是有风险的，所以我对它进行加密。为了简单起见，我们假设使用btoa()和atob()方法。

我希望能够转换值，所以当它被插入到本地存储[或任何其他变量]中时，可以说它是btoaed，然后为了显示，它被使用atob转换回可读文本。

我找不到任何关于这种转换的有用信息，尽管我认为应该存在类似ng-options的东西，其中可以将转换应用于数据，例如：ng-options="item as item.slice(-4)

来自前方的感谢。

请注意，我知道安全方面的考虑，也知道这通常是个坏主意，但这个问题是为了通用答案。

虽然这不能回答您的问题，但在我看来，直接绑定到localStorage并不是一个优雅的解决方案。我会用这样的东西来代替：

$scope.viewModel = { password: atob(localStorage.pass), ... };
$scope.login = function() {
    ...
    localStorage.pass = btoa($scope.viewModel.password);
}

或者，如果你想在每次模型更改时保存它，你可以订阅模型更改事件：

$scope.$watch('viewModel.password', function(newValue) {
    localStorage.pass = btoa(newValue);
});
相关文章：