Angular 指令绑定事件并将参数传递给控制器​​函数

Question

I have this directive that binds and event to input file elements, and calls a function on the controller

appFuncionario.directive('onFileChange', function () {
   return {
      restrict: 'A',
      link: function (scope, element, attrs) {

         var onChangeHandler = scope.$eval(attrs.onFileChange);
         //this is where I want to send the parameter
         element.on('change', onChangeHandler);

         element.on('$destroy', function () {
            element.off();
         });

      }
   };
});


<input ng-show="campo.codTipoCampo === 'InputFile'" id="{{campo.id}}" type="file" campo="{{campo}}" on-file-change="uploadFile" />

 //Function in the controller - this is where I want to get a parameter from the directive
 $scope.uploadFile = function (parameter) {

        //do something here
};

I need to pass a parameter from the object where the directive is in, to the function executed by the directive on the change event.

I know I can use something like this campo="{{campo}}" on the element, and catch it like this attrs.campo on the directive, but I can't figure it out how to do this binding

element.on('change', onChangeHandler);

passing a parameter - I always get this error

jqLite#on() does not support the selector or eventData .

Here's a Plunkr

Answer 1

Is this what you're looking for? I'm trying to figure out the bigger picture here as to why you're trying to stuff in variables in the directive level and not just using the controller for what it is intended for but take a look at the Fiddle below and lmk if that's what you're looking for.

 // Code goes here var app = angular.module('fiddle', []); app.controller('MainCtrl', function($scope) { $scope.teste = function(campo) { alert("Campo: " + campo); }; }); app.directive('onFileChange', function() { return { restrict: 'A', link: function(scope, element, attrs) { var onChangeHandler = scope.$eval(attrs.onFileChange); element.on('change', function() { onChangeHandler(attrs.campo); }); element.on('$destroy', function() { element.off(); }); } }; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="fiddle"> <div ng-controller="MainCtrl"> <!-- Attribute campo is the variable stuffed into the controller function via the directive on change event --> <input type="file" campo="{{'I did it!'}}" on-file-change="teste" /> </div> </div>