Javascript 如何将参数从指令方法传递到控制器？

我想将对象从指令发送到控制器

$scope

当方法inoked但

文件

在控制器中打印未定义时，知道下面代码中实现的错误是什么吗？ main.html

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

controller.js

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

        };

---

检查下面的代码段<代码>'='在指令的独立作用域和父作用域之间设置双向绑定表达式

angular
.module（'演示'，[]））
.controller（'DefaultController'，DefaultController）
.指令（“文件模型”，文件模型）；
DefaultController.$inject=['$scope']；
函数DefaultController（$scope）{
$scope.uploadFile=上传文件；
函数上载文件（文件）{
log（'FILE'，FILE）；
}
}
fileModel.$inject=['$parse']；
函数文件模型（$parse）{
var指令={
限制：“A”，
范围：{
callbackFn:“=”
},
链接：linkFunc
};
返回指令；
函数linkFunc（范围、元素、属性）{
var model=$parse（attrs.fileModel）；
var modelSetter=model.assign；
元素绑定（'change'，function（））{
作用域$apply（函数（）{
var file=元素[0]。文件[0]；
modelSetter（范围、文件）；
log（'test'，文件）；
scope.callbackFn（文件）；
});
});
}
}

---

检查下面的代码片段<代码>'='在指令的独立作用域和父作用域之间设置双向绑定表达式

angular
.module（'演示'，[]））
.controller（'DefaultController'，DefaultController）
.指令（“文件模型”，文件模型）；
DefaultController.$inject=['$scope']；
函数DefaultController（$scope）{
$scope.uploadFile=上传文件；
函数上载文件（文件）{
log（'FILE'，FILE）；
}
}
fileModel.$inject=['$parse']；
函数文件模型（$parse）{
var指令={
限制：“A”，
范围：{
callbackFn:“=”
},
链接：linkFunc
};
返回指令；
函数linkFunc（范围、元素、属性）{
var model=$parse（attrs.fileModel）；
var modelSetter=model.assign；
元素绑定（'change'，function（））{
作用域$apply（函数（）{
var file=元素[0]。文件[0]；
modelSetter（范围、文件）；
log（'test'，文件）；
scope.callbackFn（文件）；
});
});
}
}

我会使用服务

app.service("fileHolder",fileHolder);
fileHolder.$inject = [];
function fileHolder(){
    var self = this,
    _file;
    self.setFile = setFile;
    self.getFile = getFile;

    function setFile(file){
        _file = file;
    }
    function getFile(){
        return _file;
    }
}

然后您可以将其注入到指令和控制器中 在指令调用中：

fileHolder.setFile(element[0].files[0]);

在控制器中调用getFile

 $scope.myFile = fileHolder.getFile();

我需要一个服务

app.service("fileHolder",fileHolder);
fileHolder.$inject = [];
function fileHolder(){
    var self = this,
    _file;
    self.setFile = setFile;
    self.getFile = getFile;

    function setFile(file){
        _file = file;
    }
    function getFile(){
        return _file;
    }
}

然后您可以将其注入到指令和控制器中 在指令调用中：

fileHolder.setFile(element[0].files[0]);

在控制器中调用getFile

 $scope.myFile = fileHolder.getFile();

---

要发送该参数，您应该进行几项更改：

在表达式中指定它：

<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
            });
        });
    }

element.bind（'change'，function（））{
作用域$apply（函数（）{
modelSetter（作用域，元素[0]。文件[0]）；
console.log（'test'，元素[0]。文件[0]）；
var file=元素[0]。文件[0]；
scope.callbackFn（{file:file}）；要发送该参数，您应该做一些更改：

在表达式中指定它：

<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
            });
        });
    }

element.bind（'change'，function（））{
作用域$apply（函数（）{
modelSetter（作用域，元素[0]。文件[0]）；
console.log（'test'，元素[0]。文件[0]）；
var file=元素[0]。文件[0]；
scope.callbackFn（{file:file}）；调用没有参数的
回调函数fn
是否重要？请尝试删除“（）”并查看它是否有效。没有
（）”
则不起作用没有参数调用
回调函数fn
是否重要？请尝试删除“（）”然后看看它是否有效。不！没有
（）