对值采取行动的角度绑定答案

【问题标题】：Angular binding with action on value对值采取行动的角度绑定
【发布时间】：2015-11-10 09:57:05
【问题描述】：

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

在 JS 中：

$scope.localStorage = localStorage;

然后在 HTML 中：

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

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

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

我找不到有关此类转换的任何有用信息，但我希望应该存在类似于 ng-options 的内容，其中可以将转换应用于数据，例如：ng-options="item as item.slice(-4)

谢谢你。

请注意，我知道安全方面的考虑，事实上这通常是一个坏主意，但这个问题是为了回答的一般用途。

【问题讨论】：

标签： javascript html angularjs data-binding

【解决方案1】：

虽然这没有回答您的问题，但在我看来，直接绑定到 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);
});

【讨论】：