Angular：寻找自定义指令语法的解释

Question

我复制了一个自定义指令watches for changes on form file inputs。

angular.module('customDirective', []) 
.directive('ngFileInputChange', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var onChangeHandler = scope.$eval(attrs.ngFileInputChange); 
      element.bind('change', onChangeHandler); 
     } 
    }; 
}); 

然后，我用它在模板中像这样：

<input ng-model="vm.image" ng-file-input-change="vm.base64Test" ...> 

这工作得很好。

然而，这不起作用：

<input ng-model="vm.image" ng-file-input-change="vm.base64Test()" ...> 

注意()在base64Test()结束。使用通用的ng-click，括号很好，甚至是必需的（我将如何将参数传递给函数？），但是使用自定义指令时，括号会导致错误。

我只对scope.$eval(attrs.ngFileInputChange)实际上在做什么有一个模糊的理解，所以也许我可以做一些改变？

编辑：

我还应该补充一点，我需要访问一些范围变量。例如，如果我没有使用自定义指令，我会写这样的事情在我的控制器：

vm.base64Test(associatedData){ 
    console.log(associatedData);  
} 

然后：

<input ng-change("vm.base64Test(vm.associatedData)"> 

但是NG-变化不看文件输入内容和自定义指令不允许参数（事件除外），所以我卡住了。

Answer 1

首先，如果你从一个指令的API调用一个方法规划（可以这么说），你需要确定它作为一个回调：

scope: { 
    'onChange': '&ngFileInputChange' 
} 

这只是意味着你定义/曝光的方式，当scope.onChange被触发申报的回调。这也意味着您不需要$parse或$eval，因为隔离范围可以为您处理。

接下来，您可以触发回调就像你已经做：

element.bind('change', function(evt){ 
    $scope.$apply(function(){ 
     var payload = { $data:<whatever-you-pull-from-your-file-change-evt> } 
     $scope.onChange(payload) 
    }) 
}); 

有一点要注意的是，我打电话$scope.$apply内回调。由于您正在侦听非角度事件（例如onChange），因此您需要通知角度在$digest周期之外发生的更改。

如果你声明的指令，在实际的回调（您的视图控制器上可能定义的），你可以将有效载荷传递给方法，像这样：

<input ng-file-input-change="vm.doSomething($data)"> 

Answer 2

将函数传递给指令时，您通常需要传递函数指针，以便指令稍后可以使用任意参数调用该函数。

在这种情况下，您的指令正在评估函数指针的属性（这就是$ eval正在做的），然后将其作为指令附加到的元素绑定为change处理程序。你不需要（或不想）有括号。

您的代码没有问题，因为它是目前。我有一个完全相同的指令，它效果很好！ （当你的函数vm.base64Test是叫你将得到standard arguments for a change event上的输入。）所以你可以有vm.base64Test是：

function(event) { 
    console.log(event); 
    // your other code here 
    // event.target will give you the input element the code was called on 
    // event.target.files will give you an array of the files selected by the user 
}