I have a file uploader that I like for my UI that's written in jQuery. It is bound to my file element on a change action. The change action shows a nifty preview and other cool stuff. It also checks to see if the mime-type is in my list of valid mime-types.
Additionally, I have angularJS wired up and its monitoring my form and I've written a number of directives that do all my validations. I tried writing a validation for my file input field but for some reason it never gets fired. Doing some googling suggests that its because angular doesn't support the file input type.
So I added the following code directly to my jQuery change action:
angular.element(myinput).scope().$apply(function(scope){
scope.project.avatar.$setValidity('image',false);
});
I can see that the validity is properly getting set to false in the debugger but the ng-class action that I have is not seeing it. So outside of this, i have the following tag:
<div ng-class="{error: project.avatar.$invalid}">You did it wrong</div>
That class never gets added.
From the Angular docs it appeared that $apply was supposed to force a refresh of the model so that everything ended up back in sync. Thats obviously not happening, but I'm not sure what I'm doing wrong. Googling found me alot of examples of how to invoke jQuery from within Angular, but very little info on how to invoke Angular from within jQuery. Any advice would be much appreciated!
can you try with the below code
<div ng-class="{error: project.avatar.image}">You did it wrong</div>
Here the validationErrorKey is image, so the $error object of the input type file will have a key called image which will be true or false based on what you set after validation.
What you might be looking for is
Markup
<div ng-show="project.avatar.$invalid">You did it wrong</div>
JS
var valid = some logic;
angular.element(this).scope().$apply(function(scope){
scope.project.avatar.$setValidity('image', valid);
});
Demo: Fiddle