角度：カスタムディレクティブの構文についての説明を参照してください

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)は実際に何をしているのかわかりません。多分私はその中でいくつかの変更を加えることができますか？

EDIT：

私も私はいくつかのスコープ変数にアクセスする必要があることを追加する必要があります。例えば、私はカスタムディレクティブを使用する必要がなかった場合、私は私のコントローラでこのような何かを記述します。

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

そして：

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

しかし、NG-の変化は見ていませんファイルの入力内容とカスタムディレクティブは（イベント以外の）引数を許可しないので、私は立ち往生しています。

Answer 1

まず、あなたはディレクティブのAPIからメソッドを呼び出すことを計画している場合：（。あなたの関数vm.base64Testが呼び出されたとき、あなたは入力にstandard arguments for a change eventを取得します）だから、vm.base64Testになることができますそう）話すこと、あなたがコールバックとしてそれを特定する必要があります。

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ハンドラとして、ディレクティブがアタッチされている要素にバインドしています。あなたはかっこをする必要はありません。

現在のところ、コードに問題はありません。私はまったく同じことをする指示を持っています、それは素晴らしい動作します！ （

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 
}