Angularjs 带有ng click的md列表项在指令中不起作用

我想做什么：

我正在尝试创建一个创建md列表的通用方法。该列表将基于其html标记中的输入。为了创建此列表，我使用了

ng transclude

。我使用的编程语言是

TypeScript

。TypeScript被编译为

ES5

我使用的版本：

角度：1.5.6

角咏叹调：1.5.6

角度材质：1.0.9

---

问题

我正在尝试将

ng click

事件添加到

md列表项

。click事件绑定到的函数由指令的作用域绑定。当我尝试运行代码时，

ng click

元素不会出现在

md列表项上。从逻辑上讲，单击列表项不会触发任何事件

我认为，
ng click
元素未设置在
md列表项上的原因是因为我收到了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>

listDirective.ts

myTestListPage.html


{{$parent.item.code}
{{$parent.item.code}{{$parent.item.title}
{{$parent.item.description}



我期望的输出：

我希望看到以下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>


A0
A0同侧眼线
知识，您可以坐在这里，奉献出一个令人赞叹的精英。这是我的生日


我可以单击列表中的某个项目，该项目将被填满（单击均衡器将被触发）。
按钮元素由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>


A0
A0同侧眼线
洛雷姆·伊普苏姆·多洛·希特·阿梅特（Lorem ipsum Door sit amet）是一位杰出的建筑设计师。这是我的生日


我无法单击列表，并且没有触发任何事件。而且款式也很乱


我尝试过的


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

我的测试代码：


{{item.code}}
{{item.code}{{item.title}}
{{item.description}


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

我尝试添加
仅添加
aria label=“”
是不够的，您必须为其提供一个内容，空字符串是默认值。反正那不是你的problem@iberbeu添加aria label=“list item”可以修复警告。但是ng click元素仍然被删除。你知道问题出在哪里吗？
ng click
是唯一不起作用的东西吗？它根本没有出现，或者只是空的？@iberbeu我刚刚在帖子中添加了更多信息。使用ng transclude获得的输出与我预期的输出不同。这可能也是我得到aria标签警告的原因。在
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>

<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>

<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>

<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>