AngularJS with Angular-ui-router and jQuery-File-Upload

Question

I am using angular-ui-router to control my states in my AngularJS application. In one partial I use jquery-file-upload. The problem that I have is that when I use the example given by jquery-file-upload, is that it defines the controller in the template like this:

<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" 
  enctype="multipart/form-data" data-ng-app="demo" 
  data-ng-controller="DemoFileUploadController" data-file-upload="options" 
  data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
... 
</form>

The form tag has data-ng-controller="DemoFileUploadController". In my controller this creates all the file upload methods needed (like $scope.submit() and $scope.queue)

The problem is that I define my controllers angular-ui-router style, like this in my app.js:

$stateProvider.state('upload', {
  url: "/upload",
  views: {
    "upload": { 
      templateUrl: "app/partials/upload.html", 
      controller: 'DemoFileUploadController' 
    },
  }
})

But this piece of code causes my file upload methods, not to be loaded (or bound) in my controller (there is no $scope.submit() and $scope.queue).

Is there a way I can use angular-ui-router and jquery-file-upload together?

The directive file-upload is using scope : true, which is creating a new isolated scope. This is why your parent scope is not binding — koolunix
– koolunix, Commented Feb 14, 2014 at 17:18
I have read about it docs.angularjs.org/guide/…, but I can't come up with a clean solution how I can still have the directive's isolated scope (which is preferred) and work with another controller's scope. — Daan
– Daan, Commented Feb 17, 2014 at 8:59

Daan · Accepted Answer · 2014-02-24 12:48:43Z

1

My fix is to simply omit the controller when defining the state:

$stateProvider.state('upload', {
  url: "/upload",
  views: {
    "upload": { 
      templateUrl: "app/partials/upload.html"
    },
  }
})

This way I assign the controller in my template (like in the example data-ng-controller="DemoFileUploadController"). I am still looking for a way to assign my controller via the stateProvider.

answered Feb 24, 2014 at 12:48

Daan

7,9615 gold badges47 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

AngularJS with Angular-ui-router and jQuery-File-Upload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related