web-dev-qa-db-ja.com

コールバック関数をディレクティブに渡す

コントローラーからディレクティブにコールバック関数を渡そうとしています。

コールバック関数のコードは次のとおりです。

$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'

同様の質問をたくさん見ましたが、どこが間違っているのか理解できませんでした。

javascriptangularjsangularjs-directiveangularjs-ng-clickgoogle-image-search
16
Mike

ディレクティブから式メソッドを呼び出すとき、ディレクティブからパラメーターをJSON形式で渡す必要があります。また、ディレクティブcallback属性値を修正して、callback="onImageSelect(image)"のような関数を渡す必要があります

ディレクティブの使用法：

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

ディレクティブテンプレート

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

次のコードはテスト済みで動作しています。

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));
    }
});
1
Dinesh Vaitage

単に使用します：

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

AngularJS開発者ガイド のこの例は、あなたの場合とかなり似ています： http://plnkr.co/edit/hYBxk070sgw54RElyWNq?p=preview

1
Joy