在 angularjs 形式中使用 ng-model 的边缘案例

Question

我正在处理一个烦人的边缘案例，希望得到一些帮助。

情况：

我正在开发一个 angular 应用程序，它是一个 'theme' 用于捐赠平台的应用程序；捐赠平台允许我们托管主题文件（图像、样式表、javascript、html 标记等）
该平台使用 liquid 模板来允许使用 CSRF 令牌并防止一些 XSS 恶意行为。
angular 的插值提供程序已更改为 // some.expression //，因此它不会干扰流式括号 {{}}
所以：99:1 html/angular 和一些液体的混合物。
使用 angular 1.2.27

问题：

liquid 标签还使我们能够在用户提交表单并且其中存在错误时从服务器读取数据。例如：当用户输入他们的卡号但忘记了一个字段时，我们可以使用像 {{ user.first_name }} 这样的液体标签来安全地访问该信息并在重新加载表单时填充字段的值属性。这样，用户就不会面对顶部有错误的空白表单。
例如：
<input ng-blur="validateFName=true" ng-required="true" placeholder="First name" type="text" name="donation[first_name]" ng-model="donation.first_name" value="'{{ donation.first_name }}'">
变为：

<input ng-blur="validateFName=true" ng-required="true" placeholder="First name" type="text" name="donation[first_name]" ng-model="donation.first_name" value="John"> 值 attr 确实被填充，angular 只是忽略它（当然这是预期用途）
然而，因为 ng-model 属性的工作方式，即使表单元素获得了它们的 value 属性填充，ng-model 忽略它并且字段实际上是空白的（无论如何对用户而言）

所以：有什么办法解决这个问题吗？本质上，我正在寻找一种方法来使用 ng-model 各自字段的值属性填充或让 ng-model 确认 value 属性。我研究了 ng-bind、-init、-value 和其他，但大多数都是为了更多 'normal' 使用 angular。是的，我知道这不是利用 angular 的最佳方式，但在这种情况下我会受到我的要求的约束。如有任何帮助，我们将不胜感激。谢谢！

Answer 1

我会尝试创建一个指令来监视 value 属性并根据更改更新 ng-model。

.directive('value', function() {
     return {
         restrict: 'A',
         require: 'ngModel',
         link: function(scope, element, attr, ctrl) {
             attr.$observe('value', function(val) {
                 ctrl.$setViewValue(val);
             }
         }
     }
})

Answer 2

另一种选择可能是在 Javascript 中的模型端而不是模板中填充数据？

而不是

<input ng-blur="validateFName=true" 
       ng-required="true" 
       placeholder="First name" 
       type="text" 
       name="donation[first_name]" 
       ng-model="donation.first_name" 
       value="'{{ donation.first_name }}'">

如果你的控制器中有什么

...
$scope.donation.first_name = "'{{ donation.first_name }}'";
...

在 angularjs 形式中使用 ng-model 的边缘案例

Edge-case using ng-model in angularjs forms

html

javascript

forms

liquid

angularjs