using angular $compile for string replacement

Question

endpointTemplate = "/api/endpoint?city={{city}}&state={{state}}&facility={{facility}}";
var model = angular.extend(scope.$new(), { city: 'Brooklyn', state: 'NY', facility: 'Facility 2' });
var compiled = $compile($('<a>', 
    {  
        //none of these work as i expect
        'ng-href': endpointTemplate,
        'test': endpointTemplate,
        'ng-bind': endpointTemplate 
    }));

var result = compiled(model);

I would like to get the value out like:

"/api/endpoint?city=Brooklyn&state=NY&facility=Facility 2"

But angular doesnt seem to leave the string "as-is" (except for the ng-bind attempt, which throws an error)

How can I make this work?

what do you mean by "doesn't seem to leave the string as-is"? Either "doesn't" is a typo, or I don't understand what you mean by "as-is" — New Dev
– New Dev, Commented Oct 27, 2015 at 15:03
I mean $compile doesn't replace the 3 placeholders in the string like I expect. It leaves the string with the placeholders ei "ng- href="/api/endpoint?city={{city}}..." instead of "ng-href="/api/endpoint?city=Brooklyn..." — parliament
– parliament, Commented Oct 27, 2015 at 16:15
You can't have unescaped white-space in a URL. Moreover the $compile service is not responsible for interpolation. — a better oliver
– a better oliver, Commented Oct 27, 2015 at 16:17

Estus Flask · Accepted Answer · 2015-10-27 16:27:52Z

1

You may notice that result will became interpolated once digest cycle is over. It is inappropriate use for $compile if all that's required is string interpolation, consider using $interpolate instead, which

is used by the HTML $compile service for data binding.

It should be something like this:

var model = { city: 'Brooklyn', state: 'NY', facility: 'Facility 2' };

var result = $interpolate($('<a>', ...)[0].outerHTML)(model);

answered Oct 27, 2015 at 16:27

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

parliament Over a year ago

Thank you, this is the answer Im looking for. In fact, I was only using an element as a hack, I see I can use a string directly with $interpolate service ei, $interpolate("/api/endpoint?city={{city}}")(model) which is even better.

Estus Flask Over a year ago

Is model data the same in both cases?

Collectives™ on Stack Overflow

using angular $compile for string replacement

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related