angularjs - HTML 属性的转义翻译

Question

我正在使用 Fuse 主题 ( http://fuse-angular-material.withinpixels.com/dashboard-project ) AngularJS 主题，但我在 Angular-Translate 和 Stepper 方面遇到问题。我想翻译该步骤的标题，但 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>