javascript - 如果表单标签上的 html 'name' 属性具有特殊字符，Angular 会抛出错误，在我的例子中为 ':'

Question

我正在开发一个 Salesforce 项目，我正在考虑使用 Angular JS 来实现它的 super 功能。 Salesforce 使用动态 ID 作为名称和 ID 等表单属性的前缀。 例如，如果表单属性 name 为 customer_registration，则它将变为 i10_j30:customer_registration

当表单的名称属性包含特殊字符(在我的例子中为“:”)时，Angular 会抛出错误。

我有以下问题。

1. 如果浏览器允许，为什么 Angular 不允许在表单名称中使用“:”。
2. 有哪些可能的解决方法可以解决此问题。

Answer 1

AngularJS Developer Guide -- Migrating from 1.3 to 1.4

表格

由于94533e57 ，表单元素的 name 属性现在只能包含可以作为 Angular 表达式的一部分进行计算的字符。这是因为 Angular 使用 name 的值作为可赋值表达式来设置 $scope 上的表单。例如，name="myForm" 将表单分配给 $scope.myForm，而 name="myObj.myForm" 将其分配给 $scope.myObj.myForm.

以前，也可以使用 name="my:name" 这样的名称，因为 Angular 对表单名称使用了特殊的 setter 函数。现在使用通用的、更强大的 $parse setter。

因此，迁移代码的最简单方法是从名称属性中删除所有特殊字符。

如果需要保留特殊字符，可以使用以下指令，该指令会将名称替换为可以在编译函数中计算为表达式的值，然后在 postLink 中重新设置原始名称功能。这可以确保 (1) 表单在范围内发布，并且 (2) 表单具有原始名称，如果您正在进行服务器端表单提交，这可能很重要。

angular.module('myApp').directive('form', function() {
  return {
    restrict: 'E',
    priority: 1000,
    compile: function(element, attrs) {
      var unsupportedCharacter = ':'; // change accordingly
      var originalName = attrs.name;
      if (attrs.name && attrs.name.indexOf(unsupportedCharacter) > 0) {
        attrs.$set('name', 'this["' + originalName + '"]');
      }

      return postLinkFunction(scope, element) {
        // Don't trigger $observers
        element.setAttribute('name', originalName);
      }
    }
  };
});