带有 ng-click 的 md-list-item 在指令中不起作用

Question

我正在尝试做的事情：

我正在尝试创建一种创建 md 列表的通用方法。该列表将基于其 html 标签内的输入。为了创建这个列表，我正在使用ng-transclude. 我正在使用的编程语言是TypeScript. TypeScript 被编译为ES5.

我使用的版本：

角度：1.5.6

角度咏叹调：1.5.6

角材料：1.0.9

---

问题

我正在尝试将ng-click事件添加到md-list-item. 单击事件绑定到的函数受指令范围的约束。当我尝试运行代码时，该ng-click元素没有出现在md-list-item. 从逻辑上讲，单击列表项不会触发任何事件。

我认为ng-click未在 上设置该元素的原因md-list-item是因为我收到了 aria 警告。如下：

ARIA: Attribute " aria-label ", required for accessibility, is missing on node: 
<button class="md-no-style md-button md-ink-ripple" type="button" ng-transclude="" ng-click="click(item)" aria-label="">
<div class="md-list-item-inner ng-scope"></div>
</button>

在 md-list-item 上添加aria-label="tab-item"可以修复错误，但 ng-click 元素仍会从 md-list-item 元素中删除。

---

我的代码

列表.html

<md-list ng-class="'{{listClass}}'">
    <md-list-item ng-repeat="item in items" ng-class="'{{itemClass}}'" ng-click="click(item)" aria-label="" ng-transclude>
    </md-list-item>
</md-list>

列表指令.ts

function myList(): ng.IDirective {

     var directive: ng.IDirective = {
         restrict: 'E',
         templateUrl: 'components/ui/list/list.html',
         transclude: true,
         scope: {
             items: '=items',
             listClass: '@listClass',
             itemClass: '@itemClass',
             click: '&click'
         },
     };

     return directive;
 }

 angular.module('ui')
     .directive('myList', myList);
}

myTestListPage.html

<my-list items="$ctrl.items" list-class="testing" item-class="md-3-line" click="showOptions(item)">
    <span class="md-avatar">{{ $parent.item.code }}</span>
    <div class="md-list-item-text" layout="column">
       <h4><b>{{ $parent.item.code }} {{ $parent.item.title}}</b></h4>
       <p>{{ $parent.item.description}}</p>
    </div>
</my-list>

---

我期望的输出：

我期望看到以下 html 代码：

<md-list role="list">
    <!-- ngRepeat: item in items -->
    <md-list-item ng-repeat="item in items" class="md-3-line ng-scope md-clickable" 
                role="listitem" tabindex="-1">
        <button class="md-no-style md-button md-ink-ripple" type="button" ng-transclude="" ng-click="showOptions(item)" 
        aria-label="A0 A0 Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut ante erat.">
            <div class="md-list-item-inner ng-scope">
                <span class="md-avatar ng-binding">A0</span>
                <div class="md-list-item-text layout-column" layout="column">
                    <h4><b class="ng-binding">A0 Lorem ipsum</b></h4>
                    <p class="ng-binding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut ante erat.</p>
                </div>
            </div>
        </button>
    </md-list-item>
</md-list>

我可以单击列表中的某个项目，该项目将被填满（并且触发单击事件）。 按钮元素由 Angular-Material 指令生成（它还在按钮上设置了正确的元素）

---

我得到的输出

运行代码时，我在浏览器中得到以下输出：

<md-list role="list">
    <!-- ngRepeat: item in items -->
    <md-list-item ng-repeat="item in items" class="md-3-line ng-scope" ng-transclude="" role="listitem" tabindex="-1">
        <span class="md-avatar ng-binding ng-scope">A0</span>
        <div class="md-list-item-text ng-scope layout-column" layout="column">
            <h4><b class="ng-binding">A0 Lorem ipsum</b></h4>
            <p class="ng-binding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut ante erat.</p>
        </div>
    </md-list-item>
</md-list>

我无法单击列表，也没有触发任何事件。造型也乱了

---

我尝试过的

• 我尝试添加 aria-label 但没有成功。
• 我用 ng-transclude 创建的列表应该给出与没有 transclude 的普通列表完全相同的输出，所以我做了一个测试。测试给出了正确的输出，指令没有给出正确的输出，我不知道为什么。

我的测试代码：

<md-list>
    <md-list-item ng-repeat="item in $ctrl.items" class="md-3-line" ng-click="showOptions(item)">
        <span class="md-avatar">{{ item.code }}</span>
        <div class="md-list-item-text" layout="column">
            <h4><b>{{ item.code }} {{ item.title}}</b></h4>
            <p>{{ item.description}}</p>
        </div>
    </md-list-item>
</md-list>

我猜这与 ng-transclude 有关（不会是第一次），但我不明白为什么

我尝试将其添加<ng-transclude></ng-transclude为元素，md-list-item但这会弄乱列表的 css。Angular-material 似乎正在使用 css 子选择器 ( :first-element) 来设置列表样式。