javascript - 如何在规范化/非规范化属性名称之前获取原始属性名称？

Question

我想创建一个可以在 <select> 上使用的指令元素，告诉它填充 <select>具有全局已知列表，该列表动态更新并在应用程序中的所有组件之间共享。

我设想这样使用它:

<select ng-model="listentry" select-the-list></select>

到目前为止，这是我的做法:

.directive('selectTheList', function ($compile, ListData) {
    return {
        restrict: 'A',
        priority: 1000,
        terminal: true,
        link: function (scope, el, attributes) {
            var child = scope.$new();
            child.listData = ListData.theList;
            el.attr('ng-options', 'listItem.name for listItem in listData track by listItem.id');
            el.removeAttr('select-the-list'); /**** ATTENTION ****/
            $compile(el)(child);
        }
    };
});

也就是说，我分配一个 ng-options根据我为此目的设置的范围执行我想要的属性，然后是 $compile

---

这很好用。但请注意我用 ATTENTION 评论的行:这假设用户使用了 <select select-the-list> ，然后标准化为 selectTheList并使用了这个指令。然而，根据the directive docs :

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows: [... snip ...]

For example, the following forms are all equivalent and match the ngBind directive:

<div ng-controller="Controller">
  Hello <input ng-model='name'> <hr/>
  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>
</div>

也就是说，如果用户执行 <select select:the:list> ，然后将应用指令，element.removeAttr('select-the-list')将不起作用，并且我会得到一个无限循环。

---

这可能是一个 XY problem ，这就是我提供所有这些上下文的原因。但如果这是一个很好的方法 - 在导致我的指令被调用的元素上找到实际属性的最佳方法是什么，这样我就可以在重新编译之前删除它？

Answer 1

angular 的创建者确实预见到了这种需求。传递到您的 link 函数中的 attributes 不仅仅是一个映射，而是一个 $compile.directive.Attributes 的实例。 .它包含一个 $attr 属性:

Properties

$attr

A map of DOM element attribute names to the normalized name. This is needed to do reverse lookup from normalized name back to actual name.

因此，您的注意行应该是:

el.removeAttr(attributes.$attr['selectTheList']);