AngularJS - 任何方法来调用JavaScript模板链接后？ [英] AngularJS - Any way to call javascript after the template is linked?

问题描述

我试图使用jQuery插件（ Plupload ）与AngularJS。我创建了一个指令，这将是我的文件上传小部件。该指令看起来像这样（的$ C $在链接功能c是的例子Plupload网站）：

I'm trying to use a jQuery plugin (Plupload) with AngularJS. I have created a directive that will be my file upload "widget". The directive looks like this (The code in the link function is a very simplified version of 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文件看起来像这样：

My upload.html file looks like this:

<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>

当我包括了＆LT我的网页上的指示，我的文件上传＆GT; 元素，所有数据绑定正确地发生。的问题是，当 scope.uploader.init（）; 运行时，IDS尚未插入到DOM然而，等等Plupload抱怨和休息，因为它可以 t选择这些元素。如果我只是硬code在模板中 fileUploadContainer 和 fileUploadDropArea IDS，它工作得很好。不过，我真的很喜欢只在一个地方定义这些标识。

When I include the directive on my page with a <my-file-upload> element, all the data bindings happen correctly. The problem is, when scope.uploader.init(); runs, the ids haven't been inserted into the DOM yet, and so Plupload complains and breaks since it can't select those elements. If I just hard-code the fileUploadContainer and fileUploadDropArea ids in the template, it works just fine. However, I'd really like to define those ids in only one place.

那么，有没有什么办法的模板在链接之后，我可以运行的init（）上上传？我想过使用 $超时运行时延迟，但是这似乎是一个pretty大砍我。有没有实现这一点的一个比较正确的做法？

So, is there any way I can run the init() on the uploader after the template is linked in? I thought about using $timeout to delay when it runs, but that seems like a pretty big hack to me. Is there a more correct way of accomplishing this?

更新

我包裹的init（）在 $超时像这样

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

只是为了确保它会表现我想，果然，这种延迟插件得到正确和作品成立。不过，我不希望有依靠 $超时的时机。如果只是一些方法我可以打电话给 scope.uploader.init（）; 模板链接后，应当一切正常。任何人都知道这样做的好方法吗？

just to make sure it would behave the way I was thinking, and sure enough, with this delay the plugin gets set up correctly and works. However, I do not want to have to rely on the timing of the $timeout. If there was just some way I could call scope.uploader.init(); after the template is linked in, everything should work fine. Anyone know of a good way of doing this?

推荐答案

您的问题实际上是其他方式 - 链接函数发生的之后的模板放在因此，在这种情况下，范围当模板发生.uploaderProperties未设置。

Your problem is actually the other way around - The link function happens after the template is put in. So in this case, scope.uploaderProperties isn't set when the template happens.

它看起来像你的模板是为templateUrl选择太花哨，真的。您可以尝试手动用jQuery设置你的ID，或在编译功能设置一切。

It looks like your template is too fancy for the templateUrl option, really. You could try manually setting your ids with jQuery, or setting everything up in the compile function.

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

这篇关于AngularJS - 任何方法来调用JavaScript模板链接后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！