执行带有指令内参数的控制器函数

Executing controller function with parameters inside directive

本文关键字：控制器 函数 参数 行带 指令 执行      更新时间：2023-09-26

我正在为Plupload库编写一个Angular指令，当试图在指令内执行控制器函数时遇到了问题。

指令的标记是这样的:

<button plupload pl-url="/upload" pl-files-model="files" pl-upload-progress="uploadProgress();" id="browse">
    ...
</button>

可以看到，我将在文件进度事件上运行的控制器函数定义为元素的属性。目前，该函数在我的控制器中存在如下:

$scope.uploadProgress = function() {
    console.log("Calling upload progress controller function");
}

然后，在我的指令中，我使用以下代码来执行该函数:

// Event handler for upload progress
uploader.bind('UploadProgress', function(up, file) {
    var fn = $parse(attrs.plUploadProgress);
    scope.$apply(function(){
        fn(scope.$parent, {$file: file});
    });
});

这成功地执行了控制器函数，因为我可以看到Calling upload progress controller function被打印到控制台，但是它似乎没有传递任何参数。我正试图从UploadProgress事件发送file参数。将该函数更改为以下内容只是在控制台中打印undefined:

$scope.uploadProgress = function(test) {
    console.log(test);
}

如何将参数传递到函数调用中?

方法1

基本上这个方法是基于调用对存储函数的引用。我想这也是最让人困惑的部分。

你可以用正常的方式把函数传递给你的指令:

<my-table ... handle="vm.handle"></my-table>

但是当涉及到调用函数时，你需要一个小技巧，首先调用函数，然后用你的参数调用它:

<button ... ng-click="handle()(item)" ...>

以Plunker为例: http://plnkr.co/txXCXe

方法2

简单传递你的函数与=在你的指令，然后:

你可以用正常的方式把函数传递给你的指令:

<my-table ... handle="vm.handle"></my-table>

并调用它，不需要额外的努力

<button ... ng-click="handle(item)" ...>

以Plunker为例: http://plnkr.co/qeLF92

相关文章：