javascript - data - ng-click angularjs

Pase la función de devolución de llamada a la directiva

Question

Estoy tratando de pasar una función de devolución de llamada de un controlador a una directiva.

Aquí está el código de la función de devolución de llamada:

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

Uso de la directiva:

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

Código directivo:

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

Uso de devolución de llamada en la plantilla:

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

Sin embargo, esto me da el siguiente error:

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

He visto muchas preguntas similares, pero no pude entender dónde estoy equivocado.

Answer 1

Al llamar al método de expresión desde la directiva, debe pasar el parámetro de la directiva en formato JSON , también debe corregir el valor del atributo de callback directiva para pasar una función como callback="onImageSelect(image)"

Uso de la directiva:

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

Plantilla directiva

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

Answer 2

Muchos desarrolladores de AngularJs ya conocen las Directivas de AngularJs y probablemente conocen el alcance de la directiva y sus métodos.

Como saben, hay 3 métodos de alcance de la Directiva AngularJs: ''@'', ''='', ''&'', pero ahora vamos a hablar solo del método ''&''. Vamos a ver cómo podemos implementar el método '' & ''en nuestras aplicaciones.

Cuando definamos una función dentro del alcance actual y deseamos implementarla en cualquier directiva, recuerde una cosa: debe prestar atención a los argumentos de su función y su orden. Si desea más, aquí hay un gran artículo al respecto:

http://www.w3docs.com/snippets/angularjs/angularjs-directive-scope-method.html

Answer 3

Simplemente use:

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

Este ejemplo de la guía del desarrollador de AngularJS es bastante similar a su caso: http://plnkr.co/edit/hYBxk070sgw54RElyWNq?p=preview

Answer 4

Trate de cambiar el objeto de alcance para ser así

scope: {
callback: ''=''
}

y funcionará

Answer 5

El siguiente código está probado y funcionando.

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

Código directivo de muestra

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

Controlador de muestra

app.controller("sample", function($scope){
$scope.calculate_tax = function (tax, obj) {
console.log("tax "+JSON.stringify(tax));
console.log("obj "+JSON.stringify(obj));
}
});