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

Question

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

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

指令

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

Answer 2

检查以下代码段。 '='在指令的隔离范围和父范围之间建立双向绑定表达式。

 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> 

Answer 3

我会使用服务

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