Escape translation on HTML attribute

Question

I'm using Fuse theme (http://fuse-angular-material.withinpixels.com/dashboard-project) angularJS theme and I have a problem with angular-translate and stepper. I want to translate the title of the step but the html syntax is weird : step-title="'Description'" . As you can see, there are double quotes and simple quote (???) and I don't know why...

Here an example :

<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'" is a big problem because I can't use angular-translate on it. I can't do something like that :

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

How can I do to use translation in stepper html attribute ?

Thank you very much !

Answer 1

Actually you can pass step-title="'{{ 'trad' | translate }}'"

Because it has stepTitle: '=?' But I am not sure

You could change source code of component:

  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();
            };
        }
    }
}

So you need modify stepper directive

You have 2 options

Try to switch to stepTitle: '@'

OR

Do something with template

 <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>