4

我正在尝试使用 angularjs 创建一个指令，但我发现了一个问题。

这是指令的js代码

angular.module('xxxFileUploader', [])
    .directive('xxxFileUploader', function() {
        return {
            restrict: 'E',
            templateUrl: 'fileUploader.html',
            scope: {
                onChange: '='
            },
            link: function(scope, element, attrs) {
                element.find('input[type="file"]').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        scope.file = input.files[0];
                        scope.onChange(input.files[0]);
                });
            }
        };
    });

指令模板

<span style="position:relative;">
    <a class='btn btn-primary' href='javascript:;'>
        Choose File...
    </a>
    <input type="file" 
           name="{{field.name}}"
           style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);opacity:0;background-color:transparent;color:transparent;' 
           />
    &nbsp;
    <span class='label label-info'>{{file.name}}</span>
</span>

我在其中使用指令的一段 html 文件

<xxx-file-uploader on-change="loadFile(field.name)" ></xxx-file-uploader>

和我的控制器的相关部分

$scope.loadFile = function(fieldName) {
    return function(file) {
        // do things with both fieldName and file...
    };
};

此代码应该只自定义文件类型输入的外观并在上传文件时执行回调。

我的问题来自这样一个事实，即目前我需要使用为每个 fileUploader 动态构建的更改回调。如您所见，回调是使用在链接时已知的参数 fieldName 和在“执行时”已知的参数文件构建的。

使用此代码，我得到 AngularJS “错误：达到 10 个 $digest() 迭代。流产！” 因为（我认为）该函数一次又一次地生成，而摘要不匹配。

一个穷人的解决方案是将 fieldName 作为另一个范围变量传递。另一个可能是将函数作为字符串 (@) 传递并在我需要时构建回调。

关于如何在不更改其界面的情况下使该指令工作的任何建议？我对 angularjs 指令很陌生（这是我的第一个指令！）所以如果您在代码中发现任何错误，请指出。

谢谢你。

第一次编辑：

我试图按照我的建议更改指令的范围

scope: {
    onChange: '='
},

至

scope: {
    onChange: '&'
},

我改变了回调调用

scope.onChange(input.files[0]);

至

scope.onChange()(input.files[0]);

现在它可以工作了，但我对结果并不完全满意。

看起来需要调用 onChange 函数来获取我的“真实”回调。在这种情况下，有没有办法让它隐式执行？

我的意思是，如果我写

<xxx-file-uploader on-change="loadFile(field.name)" ></xxx-file-uploader>

它应该理解执行该功能

如果相反我写

<xxx-file-uploader on-change="doSomething" ></xxx-file-uploader>

它应该认识到 doSomething 是我希望它执行的“真实”回调（使用 file 参数）。

4

4 回答 4

6

您使用的方式onChange: '='和功能不正确。以下解决方案确实稍微改变了指令的接口，但我认为重命名onChange以onChangeFactory更好地反映其预期用途。onChange但是，如果您不介意细微的不一致，该名称可以保留。

将自己传递loadFile()为：

<xxx-file-uploader on-change-factory="loadFile(fname)" ></xxx-file-uploader>

修改指令以使用函数绑定：

scope: {
    onChangeFactory: "&"
}

调用工厂并获得实际的回调link()：

        link: function(scope, element, attrs) {
            // HOW ARE YOU GETTING FIELDNAME???
            var onChange = scope.onChangeFactory({fname: FIELDNAME});
            element.find('input[type="file"]').change(function() {
                var input = this;
                if (input.files && input.files[0]) {
                    scope.file = input.files[0];
                    onChange(input.files[0]); // <--- NOTE CHANGE HERE TOO
                }
            });
        }

请注意onChangeFactory()从指令内部调用的方式！我想会有一些差距（例如文件名），但我相信这是一个很好的起点。

于 2013-11-07T09:34:09.317 回答
3

如果您要传递对函数的引用，则应在指令的范围参数中使用“&”

scope: {
  onChange: '&'
},
于 2013-11-07T09:31:21.177 回答
0

我自己还在学习 AngularJS，但是这篇文章https://stackoverflow.com/a/19890548/1959741提到了使用对象映射语法。我在 AngularJS API 文档中找不到对象映射，但是通过将 {paramName:directiveVar} 语法添加到回调事件模板，它对我有用。

于 2014-01-14T18:13:37.170 回答
0

你快到了......你缺少的关键部分是$eval。而不是打电话scope.onChangeFactory({fname: FIELDNAME});，你可以打电话：scope.$eval(scope.onChangeFactory)。这意味着您不需要知道控制器传入了什么参数。

这是我自己的代码的一些片段，其中包含带有一些按钮的指令，并且我添加了单击按钮时的回调。而不是使用link我controller在我的指令中使用来响应按钮点击。

指令模板的一部分，带有一个可以单击的按钮：

<button type='button' ng-click='incrementClick()'>

指令代码：

.directive('numberSpinner', function() {
  return {
    restrict: 'EA',
    scope: {
      onIncrement: '&'
    },
    controller: ['$scope', function($scope) {
      $scope.incrementClick = function() {
        // Evaluate the callback
        $scope.$eval($scope.onIncrement); 
      };
    }],
    templateUrl: 'number-spinner.tpl.html'
  };
})

使用该指令的控制器（查看它是如何传入模型对象的item）：

<number-spinner on-increment='myCallback(item)'></number-spinner>

在控制器中：

$scope.myCallback= function(item) {
  ...
};
于 2014-01-13T11:25:35.837 回答