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

【问题标题】：Angular throws error if html 'name' attribute on a form tag has special characters, ':' in my case如果表单标签上的 html 'name' 属性有特殊字符，Angular 会抛出错误，在我的例子中是 ':'
【发布时间】：2016-11-29 00:51:27
【问题描述】：

我正在处理一个 Salesforce 项目，我正在考虑使用 Angular JS 来实现其超级英雄的功能。 Salesforce 前缀使用动态 ID 形成名称和 ID 等属性。例如，如果表单属性 name 为 customer_registration，则它变为 i10_j30:customer_registration

当表单的 name 属性包含特殊字符时，Angular 会抛出错误，在我的例子中是 ':'。

我有以下问题。

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

【问题讨论】：

angularJS <form> 指令使用name 属性在$scope 上创建一个对象。
我知道但是，如果浏览器允许，为什么 Angular 不允许特殊字符。

标签： javascript angularjs salesforce

【解决方案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。

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

如果需要保留特殊字符，可以使用以下指令，该指令会将名称替换为编译函数中可以作为表达式求值的值，然后在 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);
      }
    }
  };
});

【讨论】：

【解决方案2】：

是的 ':' 可能会在您尝试按名称访问表单元素时产生问题。

下面的链接有同样的讨论，

https://github.com/angular/angular.js/issues/13771

.directive('form', function() {
  return {
    restrict: 'E',
    priority: 1000,
    compile: function(element, attrs) {
      if (attrs.name && attrs.name.indexOf(':') > 0) {
        attrs.$set('name', 'this["' + attrs.name + '"]');
        console.log(attrs);
      }
    }
  };
});

建议的解决方法是创建自定义表单指令。

http://plnkr.co/edit/414QyUt32eZ129kJeJik?p=preview

http://plnkr.co/edit/VuHgBr5EQHTLJrk0HEVC?p=preview

【讨论】：