Question

我正在为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被打印到控制台中，但它似乎没有传递任何参数。我尝试从file事件发送UploadProgress参数。将功能更改为刚刚在控制台中打印的undefined：

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

如何将参数传递给函数调用？

Answer 1

方法1

基本上该方法基于调用对存储函数的引用。我想这也是带来最多困惑的部分。

您可以正常方式将该函数传递给您的指令：

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

但是在调用函数时需要一个小技巧，首先调用函数然后用你的参数调用它：

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

作为Plunker的工作示例： http://plnkr.co/txXCXe

方法2

Simpy在你的指令中使用=传递你的函数，然后：

您可以正常方式将该函数传递给您的指令：

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

并且不需要额外的努力就可以打电话

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

作为Plunker的工作示例： http://plnkr.co/qeLF92

使用指令内的参数执行控制器功能

1 个答案:

方法1

方法2