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
– Lukasz Madon, Commented Jul 23, 2014 at 16:58
possible duplicate of File input 'accept' attribute - is it useful? — dave
– dave, Commented Jul 23, 2014 at 16:58
My question stems much deeper than the post that you believe I may be duplicating @dave. I have modified my question to accommodate its astronomical depth. I would hope that you take another look at my question. — WebWanderer
– WebWanderer, Commented Jul 23, 2014 at 18:01

dave · Accepted Answer · 2014-07-23 21:12:53Z

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, 2014 at 21:12

answered Jul 23, 2014 at 19:00

dave

65.1k6 gold badges81 silver badges98 bronze badges

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

14 Comments

WebWanderer Over a year ago

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 Over a year ago

Is there anyway that we can make Angular evaluate bind statements on the templateURL? I think this will work if we can

WebWanderer Over a year ago

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 Over a year ago

I found this quite useful

dave Over a year ago

jsfiddle.net/R6VJ5 - figured it out. It was looking for the propery "mime-type" since camelCase is used in a directive to indicate dashes.

|

Community · Accepted Answer · 2017-05-23 10:25:04Z

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, 2017 at 10:25

CommunityBot

11 silver badge

answered Jul 23, 2014 at 17:15

Samuel Neff

75.3k18 gold badges144 silver badges186 bronze badges

Collectives™ on Stack Overflow

Angular.js dynamically construct templateURL for directive

2 Answers 2

14 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related