Changed start/endsymbols (interpolateProvider) not used in templates

[josvos]

When the application has changed the start/endsymbols (in my case I used $interpolateProvider.startSymbol('{$').endSymbol('$}'); for that), some elements, like dialogs, are not working properly, as the default symbols {{ and }} are hardcoded in the templates.

[gkalpak]

👍

[ThomasBurleson]

@ajoslin - should we use $interpolateProvider to temporarily cache and override (and restore afterwards) the symbols when processing the dialog templates?

[gkalpak]

Wouldn't it be safer (and less hackier) to use the actual symbols in the template ?

[ThomasBurleson]

@gkalpak - can you elaborate since I am I understand your point.

[ajoslin]

We can use ng-bind and ng-bind-template everywhere instead of the symbols.
On Mon, Dec 8, 2014 at 11:16 Thomas Burleson notifications@github.com
wrote:

@gkalpak https://github.com/gkalpak - can you elaborate since I am I
understand your point.

—
Reply to this email directly or view it on GitHub
#877 (comment).

[gkalpak]

I might have missed something, but from a quick look it seems that the problem is that the dialog templates use {{...}} (assuming that those are the interpolation symbols).

This could be circumvented by using the actual symbols:

function MdDialogProvider(..., $interpolateProvider) {
  var START = $interpolateProvider.startSymbol();
  var END = $interpolateProvider.endSymbol();
  ...
  template: '...' + START + 'dialog.label' + END + '...';   // instead of '...{{dialog.label}}...'

[gkalpak]

@ajoslin: ngBindTemplate only makes sense if you are going to use interpolation, so you'd need the symbols again.
ngBind would work for element texts, but what about aria-label="{{dialog.lable}}" ?

[ThomasBurleson]

@gkalpak - this is what I part of what I was originally proposing... Your latest suggestion IMO makes the markup very ponderous and forces manually concatenation of template segments.

[josvos]

Note: not only the dialog template uses {{...}} but others, like toast, too. Be sure to grep for all the symbols when fixing this ;-).

[ThomasBurleson]

In fact many of our components markup use {{...}} notations.

[gkalpak]

@ThomasBurleson: You are already doing concatenation of template segments, but my suggestion does indeed make the code less readable. There are ways to improve this of course (e.g. using {{...}} and replacing all accurences with the actual symbols at the end).

I don't know how temporarily swapping the actual symbols with {{...}} will help, since the templates will be compiled later (when the actual symbols will have been restored).

There could be a helper function that takes a template and replaces all {{...}} with the actual symbols (a standalone service for example or part of MdUtils).

[josvos]

@galpak: yes, or even appending a simple replace(...) (twice) would do the job and leave the template text readable and simple.

[ThomasBurleson]

@josvos 👍

[gkalpak]

@josvos: That's what I meant by "using {{...}} and replacing all accurences with the actual symbols at the end".

Of course, as there are templates in several places, this should be put into a helper service/function.

[ThomasBurleson]

@gkalpak - like the helper function idea also 👍

[gkalpak]

FYI

Grepping the current master (44a3322), I found templates in the following files:

• src/components/dialog/dialog.js (for alerts and confirms)
• src/components/textField/textField.js (this seems to work; I have no idea why)
• src/components/toast/toast.js (for simple toasts)

Toast could get away with ngBind, but for Dialog and TextField this won't suffice.
I can't explain it, but TextField seems to work anyway. (I am obviously missing something, but this is creepy at the moment 😈)

Here is a fiddle showcasing the affected components.

[gkalpak]

@ThomasBurleson, @ajoslin: I have put together a PR implementing a fix for the templates: #887

It is still kind of WIP, but most of the work has been done.
Basically, what remains to be done (afaiac) is finding out why mdTextFloat does work (see fiddle above), even if it has a hard-coded template with {{...}}.

The actual code changes are pretty limited; most of the added code is tests.
If you happen to take a look and like this approach, your feedback would be most welcome 😉