Angular Materialダイアログのコンポーネントes5 vs es6

Question

ダイアログ内にコンポーネントをロードしたいので、$ scopeと依存関係注入を使って "古い"スタイルで行いました。

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

私はES6スタイルにそれを書き換えるしかし、その後、私はtextに合格しようとしている結合は利用できません長いです。私の欠点は何ですか？

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

私が実装して遊んでいた、あなたはまだ `スコープとスコープを渡す必要がES6は今

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)