将回调函数传递给指令

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

尝试将作用域对象改成这样

scope: {
        callback: '='
    }

它会起作用

Answer 3

只需使用：

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

这个例子来自AngularJS developer guide is pretty similar to your case: http://plnkr.co/edit/hYBxk070sgw54RElyWNq?p=preview

Answer 4

以下代码已经过测试并有效..

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));
    }
});

将回调函数传递给指令

Pass callback function to directive

javascript

angularjs

angularjs-directive

angularjs-ng-click

google-image-search