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

Question

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

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

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

<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 一起放置，然后使用前面提到的方法将 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 key ，但我希望这能起作用。