AngularJS, inline filter for appended html

Question

I'm trying to do something similar to the following: Plunker

I know that i can use $filter service but I think that inline filtering is more expressive.

If anyone can take a look at link above and tell me where is my mistake.

Edit(using $interpolate): Plunker

I'm not sure If I'v used $interpolate the right way but as you can check here I think I did.

Have you looked at the `$interpolate` provider? https://docs.angularjs.org/api/ng/service/$interpolate — jeremywoertink, Nov 07 '14 at 19:39

yggie · Accepted Answer · 2014-11-07T21:38:15.137

my guess is that Angular has no knowledge of the template, you need to manually compile it or preferably, use the template key when creating the directive.

I modified your snippet here, but basically it boils down to:

mainApp.directive('mainContainer', function($parse){
  return {
    template: '<h1>{{ lowerString | CapFirst }}</h1>',
    link: function(scope, elem) {
      scope.lowerString = 'lol';
    }
  };
});

Edit

As requested, here is an alternative snippet that uses the $compile service:

mainApp.directive('mainContainer', function($compile){
  return function(scope, elem) {
    var lowerString = 'lol';
    var html = $compile('<h1>{{ "' + lowerString + '" | CapFirst }}</h1>')(scope);
    elem.append(html);
  };
});

This could also work if you used $interpolate instead of $compile. The benefit of using $compile is that if you were using a template with bindings to the scope, $compile would properly bind the scope to the template, whereas $interpolate would not.

Thank you, I think I will use your way, but can you show me how to compile it manually? — Aviel Fedida, Nov 07 '14 at 19:50
@AvielFadida I updated it with an alternative method which does the same thing but is a little more messy! — yggie, Nov 07 '14 at 20:16

AngularJS, inline filter for appended html

1 Answers1

Edit