javascript - 在 angularjs 形式中使用 ng-model 的边缘情况

Question

我正在处理一个恼人的边缘情况，希望得到一些帮助。

情况:

• 我正在开发一个 Angular 应用程序，它是捐赠平台的“主题”；捐赠平台允许我们托管主题文件(图像、样式表、javascript、html 标记等)
• 该平台使用流动模板来允许使用 CSRF token 并防止一些 XSS 恶意行为。
• Angular 插值提供程序已更改为 // some.expression //所以它不会干扰液体支架{{}}
• so:html/Angular 和一些 Liquid 的 99:1 混合。
• 使用 Angular 1.2.27

问题:

• 如果用户提交表单并且其中存在错误，液体标签还使我们能够从服务器读回数据。例如:当用户输入卡号但忘记了字段时，我们可以使用液体标签，例如 {{ 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 attrs 已填充，ng-model 会忽略它，并且字段实际上是空白的(无论如何对用户而言)

那么:有什么办法可以解决这个问题吗？本质上，我正在寻找一种方法来填充 ng-model s 具有各自字段的 value 属性或具有 ng-model确认value属性。我研究过 ng-bind、-init、-value 等，但大多数都是为了更“正常”地使用 Angular。是的，我知道这不是利用 Angular 最佳方式，但在这种情况下我受到我的要求的约束。任何帮助将非常感激。谢谢!

Answer 1

我会尝试创建一个指令来监视值属性并在更改时更新 ng-model。

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