@ Binding override значение по умолчанию?

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

Кажется, что изменение в связке AngularJS. Теперь вы можете добавить ? к вашему переплету, чтобы сделать его необязательным.

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

Таким образом, если привязка не определена, она не используется, поэтому компонент ссылается на значения по умолчанию, заданные в классе.

Answer 2

//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',
}
});