Kossel Kossel - 2 months ago 71
AngularJS Question

Component in Angular material dialog es5 vs es6

I want to load a component inside a dialog, I did it in "old" style with $scope and dependency injection and it's working.

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

However I rewrite it to ES6 style, then the binding I'm trying to pass
text
is not longer available. any idea what am I missing?

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

I was playing with the implementation, seems that ES6 is working now

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)