Angular material對話框中的組件es5 vs es6

Question

我想在對話框中加載一個組件，我使用$ scope和dependency injection注入了「舊」風格，並且它正在工作。

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)