-
Notifications
You must be signed in to change notification settings - Fork 81
Support for custom interpolation symbols #105
Description
If the $interpolateProvider is changed template labels do not render correctly.
At the project I'm working on, we needed to change the $interpolateProvider at some point and unfortunatly that has not allowed us to use the "angular-formly-templates-bootstrap".
I've been reading about this issue and how it could be fixed. I was surprised to find out that the bootstrap project already had to deal with this a couple of years ago. (Bootstrap issue 235 | angular-widgets issue 202)
What they did, was instead of using expressions, they replaced them with the "ng-bind" directive.
So, with this information I went to the dist files I had and tried the following for testing:
I changed the equivalent of: src/wrappers/label.html from this:
<div>
<label for="{{id}}" class="control-label {{to.labelSrOnly ? 'sr-only' : ''}}" ng-if="to.label">
{{to.label}}
{{to.required ? '*' : ''}}
</label>
<formly-transclude></formly-transclude>
</div>
to this:
<div>
<label for="{{id}}" ng-class="'control-label ' + (to.labelSrOnly ? 'sr-only' : '');" ng-if="to.label" ng-bind=" to.label + ' ' + (to.required ? '*' : '')">
</label>
<formly-transclude></formly-transclude>
</div>
(Also for the css class definition I used the "ng-class" directive to get rid of the "{{" "}}" delimited expression that is causing this incompatibility issue.)
And with it, I was able to use correctly the "angular-formly-templates-bootstrap" in a project with a customized $interpolateProvider.
So I was wondering if this could be added to the code, to expand this template to be used on even more case scenarios