Using Filters On The `template` Of A `directive` In Angular

This question is about using a combination of bind and filters within the template of a directive. Just read through the top, it gives an understanding of what has already been don

Solution 1:

It is working properly, it's just being used incorrectly.

You are using expression binding within an HTML tag, expression binding will only work within an attribute within the html tag or outside of an html tag.

Example:

<tag attr="{{ binding }}"></tag>  <!-- Good -->
<tag>{{ binding }}</tag>          <!-- Good -->
<tag {{ binding }}></tag>         <!--  Bad -->

Using your template:

<input type="file" id="files" name="files[]" accept="{{mimeType | accept}}" multiple />

Now if you change your filter return from return 'accept="' + mimeType + '"'; to return mimeType; then you should get the desired results.

Fiddle