[英]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. 我想在对话框中加载组件,我使用$ 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 “旧”样式的Codepen
However I rewrite it to ES6 style, then the binding I'm trying to pass text
is not longer available. 但是我将其重写为ES6样式,所以我尝试传递text
的绑定不再可用。 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);
I was playing with the implementation, seems that ES6 is working now 我在玩实施,似乎ES6正在运行
http://codepen.io/luchaca/pen/qaRroz?editors=1011 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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.