Question

我有一个用于多个页面的AngularJS组件。在该组件中，我具有以下绑定：

cancelText: '@',
confirmText: '@',

这堂课

@Inject('$mdDialog')
export class MultiLinePromptDialogComponent {

    public cancelText = 'Annuleren';
    public confirmText = 'Bevestigen';

    constructor (private $mdDialog) { }

    public cancel(): void {
        this.$mdDialog.cancel();
    }

    public confirm(): void {
        this.$mdDialog.hide(this.result);
    }
}

在其他组件中，我使用以下组件创建模板：

template: `<multiline-prompt-dialog cancel-Text="Cancel">

当我在浏览器中打开对话框时，可以看到预期的Cancel文本。但是，当我像这样在模板中定义组件时：

template: `<multiline-prompt-dialog">

没有cancel-Text="Cancel属性，我在浏览器中检查了组件，模板什么也没显示。虽然我希望它显示出public cancelText = 'Annuleren的值。但是看来绑定是用空字符串覆盖该值。

我们只是升级到Angular 1.7，所以问题可能出在该升级上。

Answer 1

//Try add this code in your component controller to initialize the empty or not valued variables
app.directive('multiLinePromptDialog', function(){
return {
    restrict: 'E',
    scope: {
        cancelText: '@',
        confirmText: '@'
    },
    controller: ['$scope',function($scope){
        if($scope.cancelText == null || !$scope.cancelText.replace(/\s/g, '').length)
            $scope.cancelText = 'Annuleren';
        if($scope.confirmText == null || !$scope.confirmText.replace(/\s/g, '').length)
            $scope.confirmText = 'Bevestigen';
    }],
    template: 'html code',
}
});

Answer 2

AngularJS绑定似乎有所变化。现在，您可以将?添加到绑定中以使其成为可选内容。

cancelText: '@?',
confirmText: '@?',

这样，如果未定义绑定，则不使用绑定，因此组件将引用类中提供的默认值。

@绑定覆盖默认值？

2 个答案: