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