javascript - 如何将参数从指令方法传递到 Controller ？

Question

当方法调用时，我想将对象从指令发送到 Controller $scope，但file在 Controller 中打印未定义，知道下面的代码中实现了什么错误吗？ main.html

<input type="file" file-model="myFile" callback-fn="uploadFile()"style="display: none;"/>

指令.js

angular.module('App').directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
         scope: { callbackFn: '&' },
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                    console.log('test',element[0].files[0]);
                    var file = element[0].files[0];
                   scope.callbackFn(file);
                });
            });
        }
    };
}]);

Controller .js

    $scope.uploadFile = function(file){
       file = $scope.myFile;
           console.log('FILE',file);

        };

Answer 1

要发送该参数，您应该进行一些更改:

在表达式中指定它:

<input type="file" file-model="myFile" callback-fn="uploadFile(file)"style="display: none;"/>

然后在调用该回调时的指令中，您还必须指定它:

element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
                console.log('test',element[0].files[0]);
                var file = element[0].files[0];
               scope.callbackFn({ file: file}); <--- here
            });
        });
    }