Передать функцию обратного вызова в директиву

Я пытаюсь передать функцию обратного вызова из контроллера в директиву.

Вот код функции обратного вызова:

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

Я видел много подобных вопросов, но не мог понять, где я не прав.


javascript angularjs google-image-search angularjs-directive angularjs-ng-click
person Mike    schedule 15.07.2015    source источник
comment
Я не уверен, что вы спрашиваете... как запускается этот обратный вызов? Что такое callback(url)?   -  person tymeJV    schedule 15.07.2015
comment
onImageSelect должна быть функцией onImageSelect(), а не переменной   -  person Fals    schedule 15.07.2015

Ответы (4)


arrow_upward
30
arrow_downward

При вызове метода выражения из директивы вам необходимо передать параметр из директивы в формате JSON, также вы должны исправить значение атрибута директивы callback для передачи функции вида callback="onImageSelect(image)"

Использование директивы:

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

Шаблон директивы

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

arrow_upward
2
arrow_downward

Следующий код протестирован и работает.

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));
    }
});
person Dinesh Vaitage    schedule 06.12.2018

arrow_upward
1
arrow_downward

Просто используйте:

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

Этот пример из руководства разработчика AngularJS очень похож на ваш случай: http://plnkr.co/edit/hYBxk070sgw54RElyWNq?p=preview

person Joy    schedule 16.07.2015

arrow_upward
-7
arrow_downward

попробуйте изменить объект области, чтобы он был таким

scope: {
        callback: '='
    }

и это будет работать

person Ahmed Eid    schedule 15.07.2015
comment
почему все голоса против? Я попробовал это, и это РАБОТАЕТ! спасибо, Ахмед. Совершенно законно передавать функцию через '=' - person John Henckel; 09.03.2017