angularjs - md-list-item ที่มี ng-click ไม่ทำงานใน directive

สิ่งที่ฉันกำลังพยายามทำ:

ฉันกำลังพยายามสร้างวิธีทั่วไปในการสร้างรายการ md-list รายการนี้จะขึ้นอยู่กับข้อมูลที่อยู่ภายในแท็ก HTML ของมัน สำหรับการสร้างรายการนี้ฉันกำลังใช้ ng-transclude ภาษาการเขียนโปรแกรมที่ฉันใช้คือ TypeScript TypeScript จะถูกคอมไพล์เป็น ES5

เวอร์ชันที่ฉันกำลังใช้งาน:

Angular: 1.5.6

angular-aria: 1.5.6

angular-material: 1.0.9

ปัญหา

ฉันพยายามที่จะเพิ่มเหตุการณ์ ng-click ให้กับ md-list-item ฟังก์ชันที่เหตุการณ์คลิกเชื่อมโยงไปนั้นถูกผูกโดย scope ของ directive เมื่อฉันพยายามรันโค้ด องค์ประกอบ 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>

การเพิ่ม aria-label="tab-item" บน md-list-item แก้ไขข้อผิดพลาดได้ แต่ element ของ ng-click ยังคงถูกลบออกจาก element ของ 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>

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 ควรให้ผลลัพธ์เหมือนกับรายการปกติที่ไม่มี transclude ดังนั้นฉันจึงสร้างการทดสอบ การทดสอบได้ผลลัพธ์ที่ถูกต้อง ส่วน directive ไม่ได้ และฉันไม่รู้ว่าเพราะอะไร..

โค้ดทดสอบของฉัน:

<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) เพื่อจัดรูปแบบรายการ