angularjs方法当做参数_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层：

  导入

上传

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

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

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

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

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

解决

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

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

// 导入文件

scope.importFile = function() {

// 将jsonFile作为参数传给C层的import函数

scope.import()(scope.jsonFile);

}

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

问题解决！