angularjs自定义指令函数传参

2019年9月15日 173次阅读 来源: 喵先生的进阶之路

问题描述

在编写导入指令的时候，需要将函数绑定到指令中，并传入一个参数。

初步实现

首先指令的js文件如下，基本的绑定参数和绑定函数，没有什么说的：

angular.module('webappApp')
    .directive('yunzhiImport', function() {
        return {
            scope: {
                importing: '=',    // 双向绑定
                import: '&',       // 绑定函数
                showImport: '&'    // 绑定函数
            },
            templateUrl: 'views/directive/yunzhiImport.html',
            restrict: 'E',
            link: function postLink(scope) {
                var self = this;

                // 数据初始化
                self.init = function() {
                    scope.jsonFile = null;
                };

                self.init();
            }
        };
    });

然后指令的V层：

<span>
    <button ng-hide="importing" class="btn btn-warning btn-sm" type="button" ng-click="showImport()"><i class="fa fa-plus">&nbsp;&nbsp;导入</i>
    </button>
    <div class="row" ng-show="importing">
        <div class="col-md-8">
            <input type="file" accept="application/json" yunzhi-file="jsonFile" />
        </div>
        <div class="col-md-3">
            <button class="btn btn-warning btn-sm" ng-click="import(jsonFile)">上传</button>
        </div>
    </div>
</span>

这里直接调用两个绑定的函数。然后这里我们在调用import()函数的时候，将jsonFile作为参数传给它（jsonFile就是是我们将要导入的文件对象）。

这时去C层打印一下获取到的参数：

《angularjs自定义指令函数传参》

为undefined，我们未能获取到参数。

因为我们在调用指令的时候，是使用的待括号的调用方式：

<yunzhi-import importing="importing" import="import()" show-import="showImport()"></yunzhi-import>

因为这样的好处是，&绑定之后，可以直接使用函数。根据以往的经验猜测，他是将函数的执行后绑定在指令上，而这个时候还没有长传文件，所以导致了undefined。

解决

这里解决就需要多做一点工作，不能直接绑定函数的执行结果，而是绑定函数体：

<yunzhi-import importing="importing" import="import" show-import="showImport()"></yunzhi-import>

唯一的区别就是去掉了import的括号。然后还需要在指令中做一点处理：

// 导入文件
scope.importFile = function() {
    // 将jsonFile作为参数传给C层的import函数
    scope.import()(scope.jsonFile);
}

我们又写了一个函数，用来触发绑定C层的函数。然后在函数执行的时候，将jsonFile作为参数传给C层的函数。

《angularjs自定义指令函数传参》

问题解决！

相关参考：https://blog.csdn.net/Inuyash…

    原文作者：喵先生的进阶之路
    原文地址: https://segmentfault.com/a/1190000017124457
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞