Angular and Bluimp jQuery-file-upload: parseMetaData error - angularjs

I'm unable to upload files because of the following error at jquery.fileupload-image.js:268
Uncaught TypeError: Cannot read property 'parseMetaData' of undefined
I'm including the following files:
ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js
ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js
ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js
maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js
cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.iframe-transport.js
cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload.js
cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload-process.js
cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload-image.js
cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload-audio.js
cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload-video.js
cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload-validate.js
cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload-angular.js
Here is my HTML:
<form data-file-upload="options">
<span class="btn btn-success fileinput-button">
<span>Add files...</span>
<input type="file">
</span>
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
<span>Start upload</span>
</button>
</form>
And here's my Angular:
$scope.options =
url: 'some.endpoint'

I just had the same error.
The link to the file Javascript-Load-Image/js/load-image.min.js has changed on github and is know : Javascript-Load-Image/js/load-image.all.min.js
By changing that it worked with me. :)
Thoma

I had this problem too. Please note that load-image.all.min.js needs to be included before the jquery.fileupload-image.js.
That was the problem here.

Related

angular protractor no element found using locator

I am using protractor locator below and
element(by.css('.config1100 .btn btn-default btn-lg')).click();
getting following error
NoSuchElementError: No element found using locator: By.cssSelector(".config1100 .btn btn-default btn-lg")
html is templateURL of anuglar-ui view
<div class="row">
<div class="config1100" ng-include="'../data/config1100.html'"></div>
<p>
<button type="button" class="btn btn-default btn-lg" ng-click="save()">Save</button>
</p>
</div>
Might be simpler to use by.buttonText
element(by.buttonText('Save')).click();
http://www.protractortest.org/#/api?view=ProtractorBy.prototype.buttonText
If you have more than one button with that text, grab the collection with element.all and figure out which one you need.
You were missing a dot, so using the dollar shortcut notation:
$('.config1100 .btn .btn-default .btn-lg')).click();

Angularjs ui bootstrap - put html inside popover

I'm using official angular bootstrap directives .
I want to use of of it's popovers .
In the documentation it says that if you want to insert html inside the popover you should use popover-html, like bellow :
<button popover-html="{{getTag()}}" type="button" class="btn btn-default">Dynamic Popover</button>
<button popover-html="<a>Just fucin show me !</a>" type="button" class="btn btn-default">Click me </button>
But this will raise the following console error :
Error: [$parse:syntax] Syntax Error: Token '<' not a primary expression at column 1 of the expression [sdfsdfsdf] starting at [sdfsdfsdf].
http://errors.angularjs.org/1.4.3/$parse/syntax?p0=%3C&p1=not%20a%20primary%20expression&p2=1&p3=%3Ca%3Esdfsdfsdf%3C%2Fa%3E&p4=%3Ca%3Esdfsdfsdf%3C%2Fa%3E
You can see the plunker
Thanks
Just remove the brackets and the $compile function:
HTML:
<button popover-html="getTag()" type="button" class="btn btn-default">Dynamic Popover</button>
JS:
$scope.getTag = function(){
return '<a>sdfsdfsdf</a>';
}

AngularJS Syntax Error when trying to parse an MongoDB ObjectId

I'm new to MEAN stack applications so I'm asking for help.
Everytime AngularJS tries to parse the following code
<button type="button" class="btn btn-link pull-right" ng-click="delete({{ post._id }});"><span class="glyphicon glyphicon-trash"></span></button>
Displays in the console the following error:
Error: [$parse:syntax] http://errors.angularjs.org/1.4.3/$parse/syntax?p0=%7B&p1=invalid%20key&p2=9&p3=delete(%7B%7B%20post._id%20%7D%7D)%3B&p4=%7B%20post._id%20%7D%7D)%3B
at Error (native) https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js:12330
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:6:416
at Object.q.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:209:32)
at Object.q.object (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:208:327)
at Object.q.primary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:205:335)
at Object.q.unary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:205:174)
at Object.q.multiplicative (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:204:434)
at Object.q.additive (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:204:261)
at Object.q.relational (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:204:96)
at Object.q.equality (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:203:425) <button type="button" class="btn btn-link pull-right" ng-click="delete({{ post._id }});">
But when I inspect the delete button I can find this:
<button type="button" class="btn btn-link pull-right" ng-click="delete(55ba1c2d6411b92c1715490c);"><span class="glyphicon glyphicon-trash"></span></button>
Could some one help me to fix this problem?
Remove the{{ }} from the ng-click attribute, it is not required in this case:
ng-click="delete(post._id);"
Why?
https://docs.angularjs.org/api/ng/directive/ngClick
The ng-click directive accepts an expression which is evaluated on click.

AngularJS syntax error when calling the same method with different params from dynamic button click events

I have two buttons that are both wired to ng-click event, but with different parameters.
<button type="button" class="btn btn-default btn-large btn-block"
ng-click="makePick({{item.EventId}}, {{eventSchedule.MemberId}},
{{item.HomeId}})">
<button type="button" class="btn btn-default btn-large btn-block"
ng-click="makePick({{item.EventId}}, {{eventSchedule.MemberId}},
{{item.AwayId}})">
And both are calling the same method:
$scope.makePick = function (eventId, memberId, teamWinSelId) { //... };
When I kick up the project in my browser, I get the following error:
Syntax Error: Token 'item.EventId' is at column {2} of the expression [{3}] starting at [{4}].
Not sure whats going on, is it a matter of having the same method call on two different buttons? Not too sure whats going wrong. I'd appreciate some guidance.
When using ng-click you omit the {{}} for view variables, they're already being processed within the directive:
<button type="button" class="btn btn-default btn-large btn-block" ng-click="makePick(item.EventId, eventSchedule.MemberId, item.HomeId)">
<button type="button" class="btn btn-default btn-large btn-block" ng-click="makePick(item.EventId, eventSchedule.MemberId, item.AwayId)">
you dont need to use curly braces in params, since ng-click processes itself this for you. curly braces are not required for any of ng prefix directive
for example
ng-click="makePick(item.EventId,eventSchedule.MemberId,
item.AwayId)

ng-include in ui-bootstrap tooltip

I am testing angularJS and ui-bootstrap tooltips :
http://angular-ui.github.io/bootstrap/#/tooltip
What I want to achieve is a tooltip with some working buttons inside.
I have tried :
<input type="text" value="{{activity.name}}"
tooltip-html-unsafe='<button class="btn btn-primary btn-mini" ng-click="addChild(activity)">+</button>
<button class="btn btn-danger btn-mini" ng-click="remove(activity)">X</button>
<button class="btn btn-danger btn-mini" ng-click="removeChildren(activity)" ng-show="activity.children.length > 0">X children</button>'
tooltip-trigger="focus"
tooltip-placement="right" />
Which is ugly and does not work. The buttons are rendered but do not execute the 'ng-click'.
Is there some way I can tell the tooltip to fetch a partial and keep the ng-click functional ?
Tooltips that would contain "live" HTML (with AngularJS directives working etc.) are not supported in the current (0.5.) version of http://angular-ui.github.io/bootstrap/#/tooltip
You might want to open a feature request for this in https://github.com/angular-ui/bootstrap/issues?state=open

Resources