แนบวิธีการเข้ากับคอนโทรลเลอร์โดยใช้ TypeScript และ controllerAs

ฉันเคยเห็นตัวอย่างของการใช้ TypeScript กับตัวควบคุมเชิงมุมและวิธีการแนบผ่านขอบเขต เช่นนี้

อย่างไรก็ตาม แนวทางปฏิบัติตอนนี้คือการใช้ controllerAs ดีกว่า

รับ TypeScript ต่อไปนี้ (สมมติว่าลงทะเบียนอย่างถูกต้องเป็นคอนโทรลเลอร์ที่อื่น ฯลฯ ):

class exampleCtrl {

    public publicArray = [1,2,3];

    public somePublicMethod() {
        window.console.log('ran function')
    }

}

สิ่งนี้สร้าง:

var exampleCtrl = (function () {
    function exampleCtrl() {
        this.publicArray = [1, 2, 3];
    }
    exampleCtrl.prototype.somePublicMethod = function () {
        window.console.log('ran function');
    };
    return exampleCtrl;
}());

สังเกตว่า somePublicMethod ถูกเพิ่มเข้าไปใน ต้นแบบ อย่างไร แต่ publicArray ได้ถูกเพิ่มเข้าไปใน this โดยตรง

เท่าที่ฉันสามารถบอกได้ วิธีการที่เพิ่มลงในต้นแบบไม่สามารถใช้งานได้ผ่าน DOM โดยใช้ controllerAs

e.g

<div ng-controller="exampleCtrl as vm">
    {{vm}} <!-- No function is output just {"publicArray":[1,2,3]} -->
    <div ng-click="vm.somePublicMethod">Click me</div> <!-- click event doesn't work -->
</div>

ตอนนี้ฉันจะเข้าถึง somePublicMethod ผ่าน DOM ได้อย่างไร หรือมากกว่า ฉันจะทำให้ฟังก์ชันสาธารณะในคลาส TypeScript (ES6) เข้าถึงได้แบบสาธารณะได้อย่างไรเมื่อใช้ไวยากรณ์ controllerAs

เสียงระเบิดเพื่อแสดงสิ่งที่ฉันเห็น

ประเด็นอื่นๆ:

ฉันรู้ว่า public, private และ protected ไม่ได้เปลี่ยนวิธีการแปลงโค้ดจริงๆ แต่จะเตือนคุณหากคุณใช้ผิด