Question

在t his 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的内容，这是为什么我的属性未定义的原因？浏览器根本无法读取它？

Answer 1

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

规范化过程如下：


从元素/属性的前面剥离x-和data-。

将:，-或_ - 分隔名称转换为camelCase。

Answer 2

Angular会自动规范化属性。 data-test="..."，x-test="..."和test="..."之类的内容被认为是相同的。你应该选择一种编写自定义属性的方法并坚持下去;没有混合和匹配。

Answer 3

这是因为角度条带x-和数据 - 来自元素/属性的前面。因此，在您的情况下，您有两个名为test的属性，一个覆盖另一个属性。我以你的傻瓜分叉为例：Plunker

<directivetest data-foo="vartest" test="vartest" another-test="vartest"></directivetest>

scope: {
    foo: '=',
    test: '=',
    anotherTest: '='
}

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

3 个答案: