将回调函数传递给指令

Question

我试图将回调函数从控制器传递给指令。

下面是回调函数代码：

$scope.onImageSelect = function(image) {
    alert('SET');
    $scope.card.image = image;
};

指令用法：

<google-image-search callback="onImageSelect" />

指令代码：

ngmod.directive('directive', function() {
    return {
        templateUrl: '/templates/template.html',
        scope: {
            callback: '&'
        }
    }
});

模板中的回调用法：

<a data-ng-click="callback(url)"></a>

但是，这给我带来了以下错误：

TypeError: Cannot use 'in' operator to search for 'onImageSelect'

我见过很多类似的问题，但不明白我错在哪里。

Answer 1

在从指令调用表达式方法时，需要以JSON格式从指令传递参数，还应该更正指令callback属性值，以传递类似于callback="onImageSelect(image)"的函数。

指令用法：

<google-image-search callback="onImageSelect(image)" />

指令模板

<a data-ng-click="callback({image: url})"></a>

Answer 2

只需使用：

<google-image-search callback="onImageSelect(image)" />

来自AngularJS开发人员指南的这个示例非常类似于您的案例：http://plnkr.co/edit/hYBxk070sgw54RElyWNq?p=preview

Answer 3

下面的代码被测试并工作..

Directive call in html

<taxcode-picker call-back-fun="calculate_tax(a, b)"></taxcode-picker>

样本指令码

{
scope:'&',
link: function (scope, element, attrs) {
 scope.tax = {amount:12, rate:10.50};
 scope.obj = {number:12, value:10};

  scope.call_back = function (tax) {
    scope.callBackFun({a:tax, b:obj});
  }
}

}

样本控制器

app.controller("sample", function($scope){
$scope.calculate_tax = function (tax, obj) {

        console.log("tax "+JSON.stringify(tax));

        console.log("obj "+JSON.stringify(obj));
    }
});