Angular.js dynamically construct templateURL for directive

Question

REVISION

As I have come to truly understand my question, I have modified this question in search for a better answer. Although this link was helpful for MIME types of the 'accept' attribute, my question stems deeper.

I am writing an application where I allow users to upload files, and the files must be of a specific MIME type.

The directive is used in many places, and the MIME type needs to change across these places. I need to dynamically construct the template of my directive in order to accommodate for each implementation of the directive.

Assume that I write HTML as so:

<cmc-file-upload mimeType="text/html" ng-if="reportFileUploadSettings.showFileUploader" upload-complete-callback="importReportFile(content)" ></cmc-file-upload>

I would then wish to apply that MIME type to the template of the directive:

components.directive('cmcFileUpload', function ()
{
    return {
        restrict: 'E',
        scope: {
            uploadCompleteCallback: "&",
            mimeType: "&",
        },
        replace: false,
        template: '<input type="file" id="files" name="files[]" accept="' + scope.mimeType + '" multiple /><output id="list"></output>',

Unfortunately, this code does not seem to work this way.

How can I make this work?

REFERENCE ERROR: scope is undefined...

Are you making a directive? I may want to check if extension of the file is .html or .htm. The correct validation can be done server side. — Lukasz Madon, Jul 23 '14 at 16:58
possible duplicate of [File input 'accept' attribute - is it useful?](http://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful) — dave, Jul 23 '14 at 16:58
My question stems much deeper than the [post that you believe I may be duplicating](http://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful) @dave. I have modified my question to accommodate its astronomical depth. I would hope that you take another look at my question. — WebWanderer, Jul 23 '14 at 18:01

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

To restrict to html use this:

template: '<input type="file" accept="text/html" id="files" name="files[]" multiple /><output id="list"></output>',

a complete answer on how to use accept is here:

File input 'accept' attribute - is it useful?

edited May 23 '17 at 10:25

Community

1
1

answered Jul 23 '14 at 17:15

Samuel Neff

73,278
17
138
182

dave · Accepted Answer · 2014-07-23T21:12:53.200

1

Change mimeType: "&", to mimeType: "@",

because you do

mimeType="text/html"

Since "text/html" is not a variable, but the raw string, you need to use @

Then, change

accept="' + scope.mimeType + '"

to

accept="{{mimeType}}"

because scope the variable is not defined (yet) - once Angular parses the template, it will replace mimeType with the variable.

Edit: And the final issue is that mimeType="text/html" needs to be mime-type="text/html" because in the directive when you do

mimeType: "@",

it thinks because you used camelCase it should look for mime-type

edited Jul 23 '14 at 21:12

answered Jul 23 '14 at 19:00

dave

62,300
5
72
93

very close, I thought that was going to be the answer for sure, but its not working. There is no filtering on the accepted MIME types. I think that Angular isn't evaluating the `accept="{{mimeType}}"` – WebWanderer Jul 23 '14 at 19:17
Is there anyway that we can make Angular evaluate `bind` statements on the `templateURL`? I think this will work if we can – WebWanderer Jul 23 '14 at 19:19
Would it make sense to attach the `ng-bind` atrribute to the template somehow? Sorry for my lack of understanding on this. Thanks for all the focus. – WebWanderer Jul 23 '14 at 19:24
[I found this quite useful](http://stackoverflow.com/questions/19980164/angular-js-directive-templateurl-fails-to-bind-scope?rq=1) – WebWanderer Jul 23 '14 at 21:02
I'm sorry, I really wouldn't know where to start on making a complex fiddle like that. I seriously appreciate the help and devotion though. I'll try – WebWanderer Jul 23 '14 at 21:05
1

http://jsfiddle.net/R6VJ5/ - figured it out. It was looking for the propery "mime-type" since camelCase is used in a directive to indicate dashes. – dave Jul 23 '14 at 21:11
Thank you! This is exactly what I have been working with, yet it is still not doing what I am trying to do. When the dialog opens, it still accepts "All Files." Does the `accept` attribute filter the upload dialog? Is it supposed to? I am using Chrome on a Windows 8 machine (unfortunately...). – WebWanderer Jul 24 '14 at 13:39
I really appreciate all of the hard work though. Thanks. – WebWanderer Jul 24 '14 at 13:48
Well [this is pretty awesome! Check out this fiddle!](http://jsfiddle.net/barney/yaE9x/) – WebWanderer Jul 24 '14 at 14:02
Ok, I got [your fiddle to work (jsfiddle.net/R6VJ5)](http://jsfiddle.net/R6VJ5/1/), but I'm not exactly sure how. I thought the `mime-type` might have been incorrect, so I set it to `text/*`, I modified your `template`, and set `replace` in your directive to `false`(I know, weird...). It worked! Then I set the `mime-type` back to `text/html`, and it still worked... What? – WebWanderer Jul 24 '14 at 14:16
My only other question would be to try and set a default. What if I dont declare a `mime-type` in my HTML? Will it default to "All Files" or will it try to match a `mime-type` of "undefined?" – WebWanderer Jul 24 '14 at 14:36
Man, I really don't know what fixed the [**fiddle**](http://jsfiddle.net/R6VJ5/3/) now, I removed almost all of my changes and it still works. – WebWanderer Jul 24 '14 at 14:40
Ok, [**why doesn't this work**](http://jsfiddle.net/R6VJ5/5/). If you switch which `template` line is commented out, you can see that I didn't break the code, it just isn't evaluating my filter. The first `template` is the one with the filter, and the second `template` (the commented out one) is the one without the filter. I'm going to post this as a new question – WebWanderer Jul 24 '14 at 15:34
[_**Here is the new question**_](http://stackoverflow.com/questions/24938698/using-filters-on-the-template-of-a-directive-in-angular) – WebWanderer Jul 24 '14 at 16:05

Angular.js dynamically construct templateURL for directive

2 Answers2