我想在对话框中加载一个组件,我使用$ scope和dependency injection注入了“旧”风格,并且它正在工作。Angular material对话框中的组件es5 vs es6
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: '<'
}
});
但是我把它改写为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);
您仍然需要传递的范围与'范围:$范围, '。相反,使用模板中的$ ctrl.inputText。 – estus
尝试过,但不工作:/注入$范围,并将其传递给show(),仍然没有按预期工作 – Kossel
好吧,'旧式'对我来说也不起作用,只是黑色覆盖和没有模态。无论如何,它就像这样简单,'$ rootElement'和'$ scope'应该在ES6中持久化。 – estus