AngularJS：不允许在 Angular 表达式中引用 DOM 节点

Question

尝试将自定义 onchange 处理程序绑定到输入文件元素。收到以下错误：

不允许在 Angular 表达式中引用 DOM 节点！表达式：setRuleFile(element

有什么办法可以解决吗？

谢谢。以下是我的代码的相关摘录。

html:

<input type="file" on-select-file="setRuleFile(element)"/>

控制器：

$scope.setRuleFile = function(element) {
    // Extract selected file name
    var pathArray = element.value.split('\\');
    $scope.data.ruleFileName = pathArray[pathArray.length - 1];  // take only name without path
    $scope.data.ruleFile = element;
}

指令：

angular.module('myModule').directive('onSelectFile', function ($parse) {
    // Triggered when user selects file
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // Get callback into variable and bind it to onchange handler
            onSelectFileFunc = $parse(attrs.onSelectFile);
//console.log(onSelectFileFunc(scope, {'element': element}));
            element.bind('change', function() { onSelectFileFunc(scope, {'element': element}); } );
        }
    };
})

Answer 1

这是一个如何在 Angular 1.x 中编写文件上传指令的示例：

angular.module('myApp', [])
  .directive('fileUpload', fileUploadDirective);

function fileUploadDirective() {
  function postLink(scope, iElem, iAttrs) {
    iElem.on('change', doStuff);

    // remove DOM event listener when Angular scope is destroyed
    scope.$on('$destroy', function() {
      iElem.off('change', doStuff);
    });

    function doStuff() {
      console.log(iElem[0].files);
    };
  };

  return {
    link: postLink,
    restrict: 'A'
  };
}

...你会像这样在你的 HTML 模板中使用它：

<input type="file" file-upload>

JSFiddle：https://jsfiddle.net/sscovil/o0ysyem5/

这个指令只是使用 jqLit​​e（Angular 的 jQuery 的淡化版本）来为元素添加一个 DOM 事件监听器；和 HTML5 File API 从元素中获取文件对象。

更新

根据 OP 的评论，以下是一个更新的示例，展示了如何使文件对象可用于同一范围内的其他指令。

angular.module('myApp', [])
  .directive('fileUpload', fileUploadDirective);

function fileUploadDirective() {
  var postLink = function(scope, iElem, iAttrs, ngModelController) {
    function updateModel(event) {
      if (iElem[0].files && iElem[0].files.length) {
        var file = iElem[0].files[0];
        ngModelController.$setViewValue(file, event.type);
      }
    };

    iElem.on('change', updateModel);

    scope.$on('$destroy', function() {
      iElem.off('change', updateModel);
    });
  };

  return {
    link: postLink,
    require: 'ngModel',
    restrict: 'A'
  };
}

...你会像这样在你的 HTML 模板中使用它：

<input type="file" ng-model="myFile" file-upload>

JSFiddle：https://jsfiddle.net/sscovil/o0ysyem5/3/

此示例使用ngModelController，而不是将文件直接绑定到作用域。这样做可以让指令的用户通过ng-model 属性决定将文件对象存储在哪个变量中。