Question

我要做的是：

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

我使用的版本：

Angular：1.5.6

角度咏叹调：1.5.6

角度材料：1.0.9

问题

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

我认为ng-click未设置md-list-item元素的原因是因为我收到的咏叹调警告。它如下：

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"可修复错误，但仍会从md-list-item元素中删除ng-click元素。

我的代码

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

listDirective.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创建的列表应该提供与普通列表完全相同的输出而不进行转换，因此我进行了测试。测试给出了正确的输出，指令没有，我也不知道为什么......

我的测试代码：

<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）来设置列表的样式。

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

0 个答案: