angularjs自定义指令函数传参

喵先生的进阶之路

问题描述

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

初步实现

首先指令的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层打印一下获取到的参数:

clipboard.png

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层的函数。

clipboard.png

问题解决!


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

阅读 3.2k

朴世超
个人学习总结与项目实战问题记录
336 声望
19 粉丝
0 条评论
你知道吗?

336 声望
19 粉丝
宣传栏