Komponente im Dialogfeld Winkelmaterial es5 vs es6

Question

Ich möchte eine Komponente in einem Dialogfeld laden, ich habe es im "alten" Stil mit $ Scope und Abhängigkeitsinjektion und es funktioniert.

angular 
    .module("MyApp", ["ngMaterial"]) 
    .controller('AppCtrl', function($scope, $mdDialog, $rootElement) { 
    $scope.inputText = "Hello from the Input" 

    $scope.openDialog = function() { 
     $mdDialog.show({ 
     template: '<test text="inputText"></test>', 
     clickOutsideToClose: true, 
     parent: $rootElement, 
     scope: $scope, 
     preserveScope: true, 
     }); 
    }; 
    }) 
    .component('test', { 
    template: '<span>{{ $ctrl.text || "Default Text" }}</span>', 
    bindings: { 
     text: '<' 
    } 
    }); 

"old" style codepen

jedoch umschreiben ich es ES6 Stil, dann ist die Bindung Ich versuche text zu passieren ist nicht mehr verfügbar. irgendeine Idee, was fehlt mir?

class AppCtrl{ 
    constructor($mdDialog) { 
    this.$mdDialog = $mdDialog; 
    this.inputText = "Hello from the Input"; 
    this.openDialog = this.openDialog.bind(this); 
    } 

    openDialog() { 
    this.$mdDialog.show({ 
     template: '<test text="this.inputText"></test>', 
     clickOutsideToClose: true, 
     preserveScope: true, 
    }); 
    }; 
} 

angular 
    .module("MyApp", ["ngMaterial"]) 
    .component('test', { 
    template: '<span>{{ $ctrl.text || "Default Text" }}</span>', 
    bindings: { 
     text: '<' 
    } 
    }) 
    .controller('AppCtrl',AppCtrl); 

ES6 style codepen

Answer 1

ich mit der Umsetzung spielte, scheint, dass ES6 jetzt

http://codepen.io/luchaca/pen/qaRroz?editors=1011

class AppCtrl{ 
    constructor($mdDialog) { 
    this.$mdDialog = $mdDialog; 
    this.inputText = "Hello from the Input"; 
    } 

    openDialog() { 
    this.$mdDialog.show({ 
     template: '<test text="vm.inputText"></test>', 
     clickOutsideToClose: true, 
     controller:()=>this, 
     controllerAs: 'vm' 
    }); 
    }; 
}; 

angular 
    .module("MyApp", ["ngMaterial"]) 
    .component('test', { 
    template: '<span>{{ $ctrl.text }}</span>', 
    bindings: { 
     text: '<' 
    } 
    }) 
    .controller('AppCtrl',AppCtrl)