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：

我们会自动转换您在页面加载时拥有的所有小部件。但是，如果您想在页面加载后创建小部件，则可以...调用filepicker.constructWidget();方法。

所以，我建议你一个简单的指令，只是将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密钥，但我希望这可行。

如何将filepicker添加到angularjs模板

1 个答案: