[英]How to pass param from directive method to controller?
I want to send object from directive to controller $scope
when method inoked but file
printing undefined in controller , Any idea what is implemented wrong in below code ? 我想在调用方法时将对象从指令发送到控制器
$scope
,但在控制器中未定义file
打印,下面的代码有什么错误实现吗? main.html main.html
<input type="file" file-model="myFile" callback-fn="uploadFile()"style="display: none;"/>
directive.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 controller.js
$scope.uploadFile = function(file){
file = $scope.myFile;
console.log('FILE',file);
};
To send that parameter you should do a couple of changes: 要发送该参数,您应该做一些更改:
Specify it in your expression: 在表达式中指定它:
<input type="file" file-model="myFile" callback-fn="uploadFile(file)"style="display: none;"/>
Then in your directive when calling that callback you must also specify it: 然后,在您的指令中调用该回调时,还必须指定它:
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
});
});
}
Check the below code snippet. 检查以下代码段。
'='
sets up a two-way binding expression between the directive's isolated scope and the parent scope. '='
在指令的隔离范围和父范围之间建立双向绑定表达式。
angular .module('demo', []) .controller('DefaultController', DefaultController) .directive('fileModel', fileModel); DefaultController.$inject = ['$scope']; function DefaultController($scope) { $scope.uploadFile = uploadFile; function uploadFile(file) { console.log('FILE', file); } } fileModel.$inject = ['$parse']; function fileModel($parse) { var directive = { restrict: 'A', scope: { callbackFn: '=' }, link: linkFunc }; return directive; function linkFunc(scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; element.bind('change', function() { scope.$apply(function() { var file = element[0].files[0]; modelSetter(scope, file); console.log('test', file); scope.callbackFn(file); }); }); } }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="demo"> <div ng-controller="DefaultController"> <input type="file" file-model="myFile" callback-fn="uploadFile" /> </div> </div>
I would use a service 我会使用服务
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;
}
}
Then you can inject it into your directive and controller And in the directive call: 然后可以将其注入到指令和控制器中,并在指令调用中:
fileHolder.setFile(element[0].files[0]);
And in the controller call getFile 并在控制器中调用getFile
$scope.myFile = fileHolder.getFile();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.