gpt4 book ai didi

javascript - AngularJS - 在链接模板后调用 javascript 的任何方式?

转载 作者:行者123 更新时间:2023-11-29 15:45:50 25 4
gpt4 key购买 nike

我正在尝试将 jQuery 插件 ( Plupload ) 与 AngularJS 一起使用。我创建了一个指令,它将成为我的文件上传“小部件”。该指令看起来像这样(链接函数中的代码是 the example on the Plupload site 的一个非常简化的版本):

.directive('myFileUpload', function () {
return {
restrict: 'E',
replace: true,
link: function(scope, element, attrs) {
scope.uploaderProperties = {
runtimes : 'html5,flash,html4',
url : 'media/upload',
max_file_size : '10mb',
container: 'fileUploadContainer',
drop_element: 'fileUploadDropArea'
};

scope.uploader = new plupload.Uploader(scope.uploaderProperties);

scope.uploader.init();

scope.uploader.bind('FilesAdded', function(up, files) {
scope.$apply();
});
},
templateUrl: 'upload.html'
};
});

我的 upload.html 文件如下所示:

<div id="{{uploaderProperties.container}}">
<div id="{{uploaderProperties.drop_element}}" style="border: 1px black dashed;">Drop files here<br><br><br></div>
Files to upload:<br>
<div ng-repeat="currFile in uploader.files">{{currFile.name}} ({{currFile.size}}) </div>
<br><br>
<!-- for debugging -->
{{uploader.files}}
<br><br>
</div>

当我在我的页面上包含带有 <my-file-upload> 的指令时元素,所有数据绑定(bind)都正确发生。问题是,当scope.uploader.init();运行时,id 尚未插入到 DOM 中,因此 Plupload 提示并中断,因为它无法选择这些元素。如果我只是硬编码 fileUploadContainerfileUploadDropArea ids 在模板中,它工作得很好。但是,我真的很想只在一个地方定义这些 ID。

那么,有什么方法可以运行 init()在模板链接后在 uploader 上?我考虑过使用 $timeout延迟它运行的时间,但这对我来说似乎是一个很大的技巧。有没有更正确的方法来完成这个?

更新

我包装了 init()$timeout像这样

$timeout(function() {
scope.uploader.init();
}, 2000);

只是为了确保它的行为符合我的想法,果然,有了这个延迟,插件就可以正确设置并运行了。但是,我不想依赖 $timeout 的时间安排。 .如果有什么方法我可以调用scope.uploader.init();链接模板后,一切正常。有人知道这样做的好方法吗?

最佳答案

您的问题实际上是相反的 - 链接功能发生在 模板被放入之后。因此在这种情况下,scope.uploaderProperties 没有在模板发生时设置。

看起来您的模板对于 templateUrl 选项来说太花哨了,真的。您可以尝试使用 jQuery 手动设置您的 ID,或者在编译函数中设置所有内容。

http://docs.angularjs.org/guide/directive

关于javascript - AngularJS - 在链接模板后调用 javascript 的任何方式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11444494/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com