在 HTML 属性上转义翻译

Question

我正在使用 Fuse 主题 (http://fuse-angular-material.withinpixels.com/dashboard-project) angularJS 主题，但 angular-translate 和步进器有问题。我想翻译步骤的标题，但 html 语法很奇怪：step-title="'Description'"。正如你所看到的，有双引号和单引号 (???)，我不知道为什么...

举个例子：

<form name="stepper" ms-stepper ng-submit="vm.submitStepper()" ng-model="vm.stepper" novalidate>
    <ms-stepper-step ng-form="step1" step="1" step-title="'Description'">
        <div ng-include="'app/main/management/users/dialogs/stepper/step-description.html'"></div>
    </ms-stepper-step>

    <!--  other steps... -->
</form>

step-title="'Description'" 是个大问题，因为我不能在上面使用 angular-translate。我不能那样做：

        <ms-stepper-step ng-form="step1" step="1" step-title="'{{ 'trad' | translate }}'">

如何在步进器 html 属性中使用翻译？

非常感谢！

Answer 1

其实你可以通过step-title="'{{ 'trad' | translate }}'"

因为它有stepTitle: '=?' 但我不确定

您可以更改组件的源代码：

  module.exports = function(){
    return {
        restrict: 'E',
        require : ['form', '^msStepper'],
        priority: 1000,
        scope   : {
            step        : '=?',
            stepTitle   : '=?',
            optionalStep: '=?',
            externalCallback: '&?',
            showButtons: '=?',
            status: '='
        },
        compile : function (tElement)
        {
            tElement.addClass('ms-stepper-step');

            return function postLink(scope, iElement, iAttrs, ctrls)
            {
                var FormCtrl = ctrls[0],
                    MsStepperCtrl = ctrls[1];

                // Is it an optional step?
                scope.optionalStep = angular.isDefined(iAttrs.optionalStep);

                // Register the step
                MsStepperCtrl.registerStep(iElement, scope, FormCtrl);

                // Hide the step by default
                iElement.hide();
            };
        }
    }
}

所以你需要修改步进指令

您有 2 个选择

尝试切换到stepTitle: '@'

或

用模板做点什么

 <div layout="column" layout-align="start start">
                <div class="title">{{step.stepTitle}}</div> <!-- here is the title-->
                <div class="subtitle" ng-if="MsStepper.isStepOptional(step.stepNumber)">Optional</div>
            </div>

在 HTML 属性上转义翻译

Escape translation on HTML attribute

angularjs

angular-translate