[SOLVED] Creating AngularJS directive with Plupload- Angular.js Recipes

  • I’m working on an app that will have file uploads.
  • I want to create a reusable file upload component that be can be included on any of the pages that need file upload functionality.
  • So, I want to create a directive that will allow me to simply put a tag to stick in my upload functionality.
  • I first made my upload functionality it’s own HTML page to make sure the AngularJS was playing nicely with the Plupload plugin.
  • I then added the following to myApp.js:

    Then, I have an HTML file like this:

    When I load this HTML page, the tag does bring in the upload.html file.

I figured out my problem. I was including all the javascript and CSS on my template HTML page. I tried moving it to the main HTML file, and then it worked. In other words, I moved

<style type=”text/css”>@import url(resources/scripts/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css);</style>
<script type=”text/javascript” src=”resources/scripts/jquery-1.7.2.min.js”></script>

<script type=”text/javascript” src=”resources/scripts/plupload/plupload.full.js”></script>
<script type=”text/javascript” src=”resources/scripts/plupload/jquery.plupload.queue/jquery.plupload.queue.js”></script>

from the upload.html file to the main, index.html file.

The javascript was dying when trying to call some Plupload stuff in the the script hadn’t had a chance to be included yet.


@angular_recipe: Creating AngularJS directive with Plupload #Angular #AngularJS

I’m working on an app that will have file uploads. I want to create a reusable file upload component that be can be included on any of the pages that need file upload functionality. I was originally thinking that I could just use a JSP tag. However, we recently discovered AngularJS and now want to use it throughout the app. So, I want to create a directive that will allow me to simply put a

tag to stick in my upload functionality.

I first made my upload functionality it’s own HTML page to make sure the AngularJS was playing nicely with the Plupload plugin. I put together something like this:

The myApp.js looks like this:

When I drag files in, I see the file names appear and the output of {{uploader.files}} change from

to the files in the uploader object. So, now I want to make it into a directive. I take all the content that’s in the body tag and save it to a file called upload.html. I then added the following to myApp.js:

Then, I have an HTML file like this:

When I load this HTML page, the

tag does bring in the upload.html file. However, it doesn’t do any of the data binding. At the bottom I see

{{uploader.files}}

instead of

that I was seeing initially when it was it’s own page.

I’m very new to AngularJS, so I’m sure I’m just missing something, or doing something wrong. How do I get this directive working?

I figured out my problem. I was including all the javascript and CSS on my template HTML page. I tried moving it to the main HTML file, and then it worked. In other words, I moved

from the upload.html file to the main, index.html file.

The javascript was dying when trying to call some Plupload stuff in the the script hadn’t had a chance to be included yet.

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] Creating AngularJS directive with Plupload- Angular.js Recipes

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.