Question

我想在对话框中加载一个组件，我在＆＃34; old＆＃34;带有$ 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)

Angular材料对话框中的组件es5 vs es6

1 个答案: