边缘案例使用angularjs形式的ng模型

Edge-case using ng-model in angularjs forms

本文关键字：ng 模型 angularjs 案例 边缘      更新时间：2024-05-11

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

情况：

  • 我正在开发一款棱角分明的应用程序，它是捐赠平台的"主题"；捐赠平台允许我们托管主题文件（图像、样式表、javascript、html标记等）
  • 该平台使用液体模板来允许使用CSRF令牌以及防止一些XSS肮脏
  • 角度的插值提供程序被更改为// some.expression //，这样它就不会干扰液体支架{{}}
  • 所以：以99:1的比例混合html/angular和一些液体
  • 使用角度1.2.27

问题：

  • 如果用户提交了一个表单，但其中有错误，liquid标签还使我们能够从服务器上读取数据。例如：当用户输入卡号但忘记了一个字段时，我们可以使用像{{ user.first_name }}这样的liquid标记来安全地访问该信息，并在表单重新加载时填充字段的值属性。这样，用户就不会面对顶部有错误的空白表单。

  • 例如：

  • <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模型也会忽略它，并且字段实际上是空白的（无论如何，对用户来说）

那么：有办法解决这个问题吗？从本质上讲，我正在寻找一种方法，用它们各自字段的value属性填充ng-model，或者让ng-model确认value属性。我已经研究了ng-bind、-init、-value等，但大多数都是为了更"正常"地使用angular。是的，我知道这不是利用angular的最佳方式，但在这种情况下，我受到我的要求的约束。如有任何帮助，我们将不胜感激。谢谢

我会尝试创建一个指令来监视value属性并在更改时更新ng模型。

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

另一个选项可能是在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 }}'";
...
相关文章：