Escape translation by HTML attribute
I am using the Fuse theme ( http://fuse-angular-material.withinpixels.com/dashboard-project ) the angularJS theme and I have a problem with angular translator and stepper. I want to translate the title of a step, but the html syntax is weird: step-title = "'Description" . As you can see, there are double quotes and a simple quote (???) and I don't know why ...
Here's 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. I cannot do something like this:
<ms-stepper-step ng-form="step1" step="1" step-title="'{{ 'trad' | translate }}'">
How can I use the translation in the stepper html attribute?
Many thanks!
source to share
In fact you can get through step-title="'{{ 'trad' | translate }}'"
Since he has stepTitle: '=?'
but I'm not sure
You can change the source code of the 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 to change the step directive
You have 2 options
Try to go to stepTitle: '@'
OR
Do something with the 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>
source to share