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

Question

我希望在方法输入时将指令中的对象发送到控制器$scope但是file在控制器中打印未定义，任何想法在下面的代码中实现了什么错误？ 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

    $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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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