I have built an app where I need dynamically change templates.
<div ng-include="templateUrl"></div>
I have two templates like addtext.html and addmedia.html. I dynnamically change it using angularjs. But in my addmedia.html template, I have filepicker's pick file widget.
<input type="filepicker" data-fp-apikey="..." data-fp-mimetypes="*/*" data-fp-container="modal" onchange="save_url()">
The pick widget does not load in the template. Is there any way to get it to work?
Well, I don't know much about filepicker.io, but as far as I understand, the problem is that widgets are constructed on page load. This means that when you switch templates, filepicker may not process them automatically, see documentation:
We'll automatically convert any widgets that you have on page load. However, if you want to create widgets once the page has loaded, you can... call
filepicker.constructWidget();method.
So, I would suggest you a simple directive that just puts an input tag with type=filepicker, and then linking filepicker to it using before mentioned method, like this:
app.directive('myFilepicker', [function() {
return {
transclude: true,
restrict: "E",
template: '<input type="filepicker">',
replace: 'true',
link: function(scope, element) {
filepicker.constructWidget(element);
}
};
}]);
and in your markup you can use it like this:
<my-filepicker data-fp-apikey="..." data-fp-mimetypes="*/*" data-fp-container="modal" onchange="save_url()"></my-filepicker>
See this demo. I don't have filepicker.io API key, but I hope this would work.
