为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称

Why can't I use data-* as a directive's attribute name in AngularJS?

本文关键字：指令 属性 data- 不能 AngularJS 为什么      更新时间：2023-09-26

在这个 plunker 上，您可以注意到一个奇怪的行为，属性名称的模式data-*在指令中。

电话 ：

<body ng-app="apptest" ng-controller="Controller">
  Test of data named attribute :
  <br/>
  <directivetest data-test="vartest" test="vartest" another-test="vartest"></directivetest>
</body>

指令：

angular.module('apptest', [])
  .controller('Controller', ['$scope',
    function($scope) {
      $scope.vartest = "This is a test";
    }
  ])
  .directive('directivetest', function() {
    return {
      restrict: 'E',
      scope: {
        dataTest: '=',
        test: '=',
        anotherTest: '='
      },
      templateUrl: "directive.html"
    }
  });

将考虑directivetest的所有属性，但data-test，因此显示：

Test of data named attribute :
Attribute with data-* name :
Attribute with regular name : This is a test
Attribute with an other regular name : This is a test

我想知道为什么会发生这种情况（我浪费了 4 个小时才发现这是问题所在）。

似乎不可能命名指令data-*，这是为什么？

我在这里读到了一些关于它的内容，http://www.w3schools.com/tags/att_global_data.asp，这就是为什么我的属性未定义吗？它根本不被浏览器读取？

指令名称的data-前缀形式允许HTML验证器工作，因为HTML5中的自定义数据属性遵循该形式。 AngularJS 指令名称规范化如下，以支持自定义数据属性：

规范化过程如下：

  • 从元素/属性的前面剥离x-和data-。
  • 将:、-或_分隔的名称转换为驼峰大小写。

Angular 会自动规范化属性。 像data-test="..."、x-test="..."和test="..."这样的东西被认为是相同的。 您应该选择一种编写自定义属性的方法并坚持下去;不混搭。

这是因为 Angular 从元素/属性的前面剥离 x 和数据。因此，在您的情况下，您有两个名为 test 的属性，一个覆盖另一个。我以您的 plunker 为例：Plunker

<directivetest data-foo="vartest" test="vartest" another-test="vartest"></directivetest>
scope: {
    foo: '=',
    test: '=',
    anotherTest: '='
}
相关文章：