如何将文件选择器添加到 angularjs 模板

Question

我构建了一个需要动态更改模板的应用程序。

<div ng-include="templateUrl"></div>

我有两个模板，例如 addtext.html 和 addmedia.html。我使用 angularjs 动态更改它。但是在我的 addmedia.html 模板中，我有文件选择器的选择文件小部件。

<input type="filepicker" data-fp-apikey="..." data-fp-mimetypes="*/*" data-fp-container="modal" onchange="save_url()">

选择小部件未加载到模板中。有什么办法让它工作吗？

Answer 1

嗯，我对 filepicker.io 了解不多，但据我了解，问题在于小部件是在页面加载时构建的。这意味着当您切换模板时，filepicker 可能不会自动处理它们，请参阅 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.

所以，我会建议你一个简单的指令，只需将 input 标记与 type=filepicker 一起放置，然后使用前面提到的方法将文件选择器链接到它，如下所示：

app.directive('myFilepicker', [function() {
    return {        
        transclude: true,
        restrict: "E",    
        template: '<input type="filepicker">',
        replace: 'true',
        link: function(scope, element) {
            filepicker.constructWidget(element);
        }
    };
}]);

在您的标记中，您可以像这样使用它：

<my-filepicker data-fp-apikey="..." data-fp-mimetypes="*/*" data-fp-container="modal" onchange="save_url()"></my-filepicker>

看到这个demo。我没有 filepicker.io API 密钥，但我希望这会起作用。

如何将文件选择器添加到 angularjs 模板

How to add filepicker to angularjs template

javascript

filepicker

angularjs

filepicker.io

angularjs-ng-include